Clever Geek Handbook

How to show DIV on repeated click in jquery?

I made 4 boxes which are all hidden and only the div (HOME) is shown on page load.

When clicking on the text "box2" hide other DIVs and show box2 (DIV) and click on box3 hide other DIVs and show box3 (DIV) .......

The question is, while box2 is shown and clicks on textbox2 again, how can I show the first box (home)? I mean when you click the menu again, how to show the main DIV?

Here is a demo http://fiddle.jshell.net/3qepfzvn/11/

Here is my code

<div class="m1"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>

<div class="m2"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>

<div class="m3"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>

<div class="m4"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>



jQuery(function(){
    $(".m1").show();
    $(".m2").hide();
    $(".m3").hide();
    $(".m4").hide();

    $(".s1").click(function(){ 
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s2").click(function(){
        $(".m1").hide();
        $(".m2").slideDown();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").addClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s3").click(function(){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").slideDown();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").addClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s4").click(function(){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").slideDown();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").addClass("bold"); 

    });

});


a { color:black; margin:0 5px;}
.m1 {  background:gray; width:400px; height:100px; }
.m2 { background:blue; width:400px; height:400px; }
.m3 { background:yellow; width:400px; height:300px; }
.m4 { background:green; width:400px; height:600px; }

.bold { font-weight:bold; }
+3


source to share


5 answers


You can use this:



jQuery(function(){
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();

var m1Status = true;
var m2Status = false;
var m3Status = false;
var m4Status = false;


$(".s1").click(function(){ 
    $(".m1").show();
    $(".m2").hide();
    $(".m3").hide();
    $(".m4").hide();
    $(".s1").addClass("bold"); 
    $(".s2").removeClass("bold"); 
    $(".s3").removeClass("bold"); 
    $(".s4").removeClass("bold"); 
     m1Status = true;
     m2Status = false;
     m3Status = false;
     m4Status = false;

});
$(".s2").click(function(){
    if (!m2Status){
        $(".m1").hide();
        $(".m2").slideDown();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").addClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = false;
        m2Status = true;
        m3Status = false;
        m4Status = false;
    }else{
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = true;
        m2Status = false;
        m3Status = false;
        m4Status = false;
    }
});
$(".s3").click(function(){
  if (!m3Status){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").slideDown();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").addClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = false;
        m2Status = false;
        m3Status = true;
        m4Status = false;
    }else{
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = true;
        m2Status = false;
        m3Status = false;
        m4Status = false;
    }

});
$(".s4").click(function(){
   if (!m4Status){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").slideDown();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").addClass("bold"); 
        m1Status = false;
        m2Status = false;
        m3Status = false;
        m4Status = true;
    }else{
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = true;
        m2Status = false;
        m3Status = false;
        m4Status = false;
    } 

});
});
+2


source


With a switch you can make it work

Html

<table>
 <tr>
    <td>
     <div style="border: 1px solid blue; background-color: #99CCFF; padding:           5px; width: 150px;">
        <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
  </td>
  <td>
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
        <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
  </td>
  <td>
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
        <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
   </td>
</tr>
</table>


JQuery

With this code you can hide when you click box2 or box3.   

function showonlyone(thechosenone) {
 $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(200);
      }
      else {
           $(this).hide(600);
      }
 });
}
+1


source 


jQuery(function(){
    $(".m1").show();
    $(".m2").hide();
    $(".m3").hide();
    $(".m4").hide();
    var homeshow = false;

    $(".s1").click(function(){ 
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s2").click(function(){
        if(homeshow){
        homeshow = !homeshow;
        $(".m1").hide();
        $(".m2").slideDown();
        }else{
         homeshow = !homeshow;
         $(".m2").hide();
         $(".m1").slide();
        }
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").addClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s3").click(function(){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").slideDown();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").addClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s4").click(function(){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").slideDown();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").addClass("bold"); 

    });

});
+1


source 


var activeDiv = 1;
jQuery(function(){
    $(".m1").show();
    $(".m2").hide();
    $(".m3").hide();
    $(".m4").hide();

    $(".s1").click(function(){
        activeDiv = 1; 
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s2").click(function(){
      if(activeDiv==2)
        {
            activeDiv = 1;
            $(".m1").show();
            $(".m2").hide();
        }  
      else
        {
          activeDiv = 2;
          $(".m1").hide();
          $(".m2").slideDown();
          $(".m3").hide();
          $(".m4").hide();
        }
      ....
Run codeHide result


+1


source


I would use .siblings()

, and .index()

for this, and if you keep the same pattern, it can be done with one function call -

$("div>a").click(function() {
    var $this = $(this),
        index = $this.index(); // first is 0, second is 1 etc

    $("body>div").eq(index).show() // Change to find the correct divs
        .siblings("div").hide();
    $(".s" + (index + 1)).addClass("bold")
        .siblings("a").removeClass("bold");
});
+1


source






More articles:


All Articles