kreemers kreemers - 23 days ago 5
HTML Question

show div border when link is clicked

I'm trying to figure out how to show the top border on a footer, once a link is clicked in mentioned footer (it shows a modal in the website, not the jsfiddle). It should also disappear when the link is clicked again. Once I apply the

display:none;
which would trigger the js to show the border, everything fails to function. Any help appreciated, thanks.

jsfiddle: https://jsfiddle.net/0gtk60gz/

HTML

<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

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

$('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

You need to change the existing JS code to this one.

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

It will show and hide the border when you click the link.

Also do not forget to remove class="border" from footer tag, if you need to show border only when the link is clicked and not by default.

And you can also remove display: none from .border, which you commented. Because it will hide the whole footer, of course, if your attempt was to use this CSS property for showing and hiding border.

Here is the working codepen