CODEWITHSUNDEEP
javascripthtmlcss
Gusic industry
Gusic industry

Reputation: 133

switching between visible and hidden using a button

Hi i have a image that if i click on the image, multiple images go from hidden to visiable, however is there a way that i can keep clicking on the image and keep switching between hidden and visible, because right now i can only make the images visible on one click.

HTML

<nav align="middle">
<ul>
    <li><a href="#"><img src="images/video-1.png" class="left" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/news-1.png" class="left" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/logo-4.png" class="home" style="width:80px;height:80px;" onclick="$('.video' || '.news' || '.games' || 'music').toggle();" onmouseover="this.src='images/logo-4-hover.png';"
 onmouseout="this.src='images/logo-4.png';"></a></li>
    <li><a href="#"><img src="images/games-1.png" class="right" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/music-1.png" class="right" style="width:100px;height:50px;"></a></li>
</ul>
</nav>

Javascript

$(document).ready(function(){

   $("img.home").click(function() {
   $("img.left, img.right").css("visibility", "visible");
   });

});

CSS

li {

display: inline;
margin-right: .75em;
list-style: none;
margin: 0;
padding: 0;
}

html,body {
height:100%;  /* new */
}


ul {
position: fixed;
bottom: 0;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border: 2px solid #ccc;
border-width: 3px 0;  

}

img.left{
visibility: hidden;

}

img.right{
visibility: hidden;

}

Upvotes: 1

Views: 111

Answers (3)

fuyushimoya
fuyushimoya

Reputation: 9813

Add css :

img.left.active, image.right.active {
    visibility: visible;
}

Then change the code to :

$(document).ready(function(){
   $("img.home").click(function() {
       $("img.left, img.right").toggleClass('active');
   });
});

Demo :

$(document).ready(function(){
   $("img.home").click(function() {
       $("img.left, img.right").toggleClass('active');
   });
});
img.left{
  visibility: hidden;
}

img.right{
  visibility: hidden;
}

img.left.active, img.right.active {
  visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav align="middle">
<ul>
    <li><a href="#"><img src="https://placehold.it/200x100" class="left" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="https://placehold.it/200x100" class="left" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="https://placehold.it/50x50" class="home" style="width:80px;height:80px;" onclick="$('.video' || '.news' || '.games' || 'music').toggle();" onmouseover="this.src='http://placekitten.com/g/50/50';"
 onmouseout="this.src='https://placehold.it/50x50';"></a></li>
    <li><a href="#"><img src="https://placehold.it/200x150" class="right" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="https://placehold.it/200x150" class="right" style="width:100px;height:50px;"></a></li>
</ul>
</nav>

Upvotes: 1

nathanhleung
nathanhleung

Reputation: 516

Try this:

CSS:

.visible {
   visibility: visible !important;
}

JS:

 $(document).ready(function(){

   $("img.home").click(function() {
     $("img.left, img.right").toggleClass("visible");
  });

});

Upvotes: 2

kmandov
kmandov

Reputation: 3209

You can use $.toggle()

$(document).ready(function(){

   $("img.home").click(function() {
       $("img.left, img.right").toggle();
   });

});

Upvotes: 0

Related Questions