display border around a div when a hyperlink is selected

Can someone help me with showing the top border on a footer when a link is clicked, and hiding it when the same link is clicked again? I've tried using display:none;, but it's affecting the functionality. Any assistance would be greatly appreciated!

View example on jsfiddle: https://jsfiddle.net/0gtk60gz/

HTML Code

<footer class="border">
  <h1 id="linkone">
    <a href="http://www.google.com">
      test
    </a>
  </h1>
    <h1 id="linktwo">
    <a href="http://www.google.com">
      test
    </a>
  </h1>
</footer>

CSS Code

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color:black;
    background-color:blue;
    padding:15px;
}

.border {
  border-top:4px solid red;
  /**display:none:**/
}

h1,a {
  color:white;
}

JS Code

$('h1.linkone')
.on('click', function (event) {
    $('.border').fadeIn(100);

})
.on('click', function (event) {
    $('.border').fadeOut(100);
});


$('h1.linktwo')
.on('click', function (event) {
    $('.border').fadeIn(100);

})
.on('click', function (event) {
    $('.border').fadeOut(100);
});

Answer №1

If you're looking to tweak your HTML code like the example below, it can help you achieve your desired outcome.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1  /jquery.min.js"></script>
<footer class="border">
 <h1 id="linkone">
   <a href="http://www.google.com">
  test
 </a>
 </h1>
   <h1 id="linktwo">
   <a href="http://www.google.com">
     test
   </a>
  </h1>
</footer>

CSS

<style type="text/css">
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color:black;
background-color:blue;
padding:15px;
}

 .border {
  border-top:4px solid red;
 /**display:none:**/
 }

h1,a {
color:white;
}
</style>

JS

<script>
  $( document ).ready(function() {
  $( "h1" ).click(function() {
  console.log('ok');
  $('footer').toggleClass( 'border');
  });
  });

</script>

You can check out a live demo Here

Answer №2

If you want to see a border appear and disappear when clicking a link, make sure to modify your existing JS code like so:

$('h1').click(function(event) {
  $('footer').toggleClass('border');
});

By making this change, the border will show or hide upon clicking the link.

Remember to remove class="border" from the footer tag if you only want the border to display when the link is clicked, not by default.

You can also eliminate the display: none property from the .border CSS style that you previously mentioned. This property would hide the entire footer, which may not be your intended outcome for showing and hiding the border.

To view the updated code example, visit this CodePen link.

UPDATE: To maintain an animation effect without extensive changes to your existing code, follow these steps:

  1. Add back the class="border" to the footer element.
  2. Include
    .toggle-border { border-top: 4px solid red;}
    in your CSS styles.
  3. Adjust your JS code accordingly:

    $('h1').click(function(event) {
      $('footer').toggleClass('toggle-border', 600, 'linear');
    });

Feel free to review the CodePen example with these updates. Additionally, I've integrated the jquery-ui script into the external JS for your convenience.

Answer №3

The footer currently has the .border class applied to it. If you set the display property to none for the footer, the .border styling will also not be visible. To resolve this issue, enclose the footer within a div and apply the .border class to that div instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic Form Submission with Ajax

I am encountering some difficulties trying to send a form via Ajax and struggling with the correct syntax in this situation. There is a div container on the page where form objects are dynamically added through an Ajax request, and then templating is appl ...

What could be the reason for the error message when using rs.send with a string input?

I'm a beginner in node and express, and I was trying to create an HTML form that takes two numbers and displays the result using "express" and "node". However, when I use rs.send(result), I encounter the following error: https://i.sstatic.net/FcUNJ.p ...

Using TypeScript with Vue and Pinia to access the store

Is it necessary to type the Store when importing it to TypeScript in a Pinia Vue project? // Component <p>{{ storeForm.firstName }}</p> // receiving an error "Property 'storeForm' does not exist on type" // Store ...

I can view this email signature correctly in VS Code and my browser, but all the other applications I've tried so far are unable to display it correctly

Simply put, I am facing an issue with my email signature. I use eM Client, while my client uses Outlook and I've also checked it in iCloud webmail. Surprisingly, none of these platforms display my email signature correctly, but VS Code and all my brow ...

Maintain parental visibility with children when navigating to a different page

I am currently working on a vertical accordion menu that opens on hover, stays open, and closes when other items are hovered. The great assistance I received from @JDandChips has been instrumental in getting this feature up and running. Now, my main focus ...

I am looking for a method to provide access to files located outside of the public folder in Laravel

Imagine <link rel="stylesheet" href="{{asset('css/style.css')}}"> is used to retrieve the style.css file from the public folder. How can I access a file that is located in the resources folder in a similar way? ...

Conceal the icon for the Dropdown Menu arrow

Is there a way to hide the old arrow icon in the Select (drop down) after changing it with a new one? HTML: <div class="row"> <div class="col-sm-12"> <select name="country" class="form-control SearchBar"> <option ...

Building a responsive image gallery modal using AJAX in Laravel platform

How can I fix the issue of the modal content briefly appearing when I load my page? I am trying to create an image gallery where a modal opens when an image is clicked. Here is the code in my view.blade.php: <script> $(".li-img").click(function ( ...

Invoker of middleware and stack functions for Express.js with a focus on capturing the response object

It appears that the expressjs app contains a stack of Layer object Arrays. What function is utilized to pass the I am curious about: When a request is sent from the http client, which function is called first and how are the stack array functions with mi ...

Utilize the arrow keys to navigate through the search suggestions

I am facing an issue with my search bar where I am unable to navigate through the suggestions using arrow keys. I have been struggling with this problem for days and would appreciate any help in resolving it. var searchIndex = ["404 Error", "Address Bar ...

When hovering the mouse over, the text fails to appear

Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas? http://jsfiddle.net/cryycw3n/ HTML <div class="square"> <div class="info"> <h2&g ...

Efficient PHP caching solution for optimizing JavaScript and CSS performance

I'm facing a unique challenge that I can't seem to solve through typical Google searches. I'm in the process of consolidating all my javascript and css into separate php files using require_once() to pull in the content. The structure of my ...

Incorporating a Link into a Radio Button component in Material-UI using react-router

Greetings! I have two radio buttons and would like to include a link. I attempted to achieve this in the following manner: <RadioButton value="/searchByArtistAndName" label="Artist and Name" style={styles.radioButton} contai ...

Moving a blank block to the top using CSS transformation

After trying to implement the translate3d(150px,0px,0px); on my "content" div, I encountered an issue where an empty block appears at the top of the page. Unfortunately, I am unsure about how to resolve this issue. <!DOCTYPE html> <html> <h ...

Guide to creating a dynamic dropdown with Ajax in Codeigniter

It feels like the [insertLongNumber]th time someone has asked this question, and despite my research efforts, I'm unable to find a fitting solution. So here it goes. I'm currently tackling a dynamic dropdown conundrum using PHP and AJAX in CodeI ...

Position a div adjacent to a particular, changing Rails component once jQuery has toggled it

Within my Rails application (which is utilizing Bootstrap's grid system), I am featuring a blog post within the left column. On the right side, I have integrated a jQuery toggle effect to reveal a quick form for user interaction such as leaving commen ...

Tips for preserving newly add row with the help of jquery and php

Currently, I am attempting to implement a functionality on a Wordpress theme options page that dynamically adds rows using jQuery. Below is the HTML code snippet from the THEME-OPTIONS page <a href="#" title="" class="add-author">Add Author</ ...

Error message: The md-autocomplete function is throwing a TypeError because it cannot read the property 'then' of an undefined object

I am encountering an issue with the md-autocomplete component from angular material. Here is my code snippet: <md-autocomplete required md-search-text="searchTxt" md-selected-item-change="setModelValue(item.name)&q ...

Customizing the appearance of all Angular components with styles.scss

Is there a way to create a universal style in styles.scss that can be applied to all Component selectors (e.g. app-componentA, app-componentB ...)? I understand that I could manually add the style to each selector, but I am concerned that it may be forgot ...

Creating multiple div elements with changing content dynamically

I am facing an issue with a div named 'red' on my website where user messages overflow the 40px length of the div. To prevent this, I want to duplicate the 'red' div every time a message is sent so that the messages stay within the boun ...