CODEWITHSUNDEEP
javascriptjqueryhtmltoggle
J.Olsson
J.Olsson

Reputation: 815

JQuery toggle between different divs

I need a some sort of a practical solution for toggle between different divs, when i click on a anchor tag.

I have done a JSfiddle that is kind of the solution i want. the problem there is when i first click on "show 1" and then "show 2" the two first placeholders content disappear, but nothing new shows up.

I want it this way: When i click "show 1", Two Placeholders appear(PlaceHolder 1 and 2). When clicking "show 2" WITHOUT closing Placeholder 1 and 2. The PlaceHolder 1 and 2 should close AND PlaceHolder 3 should appear.

Jsfiddle: http://jsfiddle.net/CY3tj/2/

HTML:

<a id="1" class="show">show 1</a>
 <br/ ><br/ >
<a id="2" class="show">show 2</a>

<div class="content-wrapper">
    <div id="item-1">           
        <div>
            <h2>Placeholder1</h2>
            <p>Placeholder1</p>
        </div>
        <div>
            <h2>PLaceHolder2</h2>
            <p>Placeholder2</p>
        </div>
    </div>     
        <div id="item-2">            
            <div>
                <h2>Placeholder3</h2>
                <p>Placeholder3</p> 
            </div>            
        </div>    
</div>

JQuery:

$(document).ready(function () {
    $(".content-wrapper").hide();
});

$(document.body).on("click", "a.show", function () {
    var id = $(this).attr("id");
    $(".content-wrapper > div").each(function () {
        if ($(this).attr("id") == "item-" + id) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
    $(".content-wrapper").toggle();
});

Upvotes: 2

Views: 2061

Answers (3)

Trevor
Trevor

Reputation: 16116

Your main problem is your using $(.content-wrapper).toggle() You only want to hide the content wrapper initially and then after one click you want it to show up. By toggling your content wrapper you were making it dissapear every other click which was why you had to click twice to see it. 

$(document.body).on("click", "a.show", function () {
  var id = $(this).attr("id");
  $(".content-wrapper > div").each(function () {
    if ($(this).attr("id") == "item-" + id) {
        $(this).show();
    } else {
        $(this).hide();
    }
  });
  $(".content-wrapper").show();
});

If you are looking to keep the toggle functionality (to hide a div that is already showing) here is a solution for that.

$(document.body).on("click", "a.show", function () {
  var id = $(this).attr("id");
  if($(".content-wrapper #item-"+id).is(':visible'))
      $(".content-wrapper").hide();
  else{
      $(".content-wrapper").children("div").hide();
      $(".content-wrapper #item-"+id).show();
      $(".content-wrapper").show();
  }
});

Upvotes: 1

Wesley Porter
Wesley Porter

Reputation: 1451

You would gain more flexibility and performance by selecting the ids of the anchor tags. You should also hide the specific divs that you want to be hidden rather than hiding the overall container. That way, you can easily target which div you want to show and which one to hide.

$(document).ready(function () {
    $(".content-wrapper > div").hide();
});

$("#1").click(function(){
    $("#item-2").hide();
    $("#item-1").show();
});

$("#2").click(function(){
    $("#item-1").hide();
    $("#item-2").show();
});

However, if you're looking to add an unknown number of these items, then you will want to select (for readability) just the element and class, rather than having to go through the document, which is just redundant.

$(document).ready(function () {
    $(".content-wrapper > div").hide();
});

$("a.show").click(function(){
    $(".content-wrapper > div").hide();
    $("#item-" + $(this).attr("id").show();
});

Upvotes: -1

PSL
PSL

Reputation: 123739

You can simplify this to:

$(function(){
  var $allItems =  $(".content-wrapper > div"); //Cache the collection here.
  $(document).on("click", "a.show", function () {
      var id = this.id, itemId = "#item-" + id; //get the id and itemId
      $allItems.not($(itemId).toggle()).hide(); //Hide all items but not the one which is the target for which you will do a toggle
  });
});

Demo

Instead of hiding the wrapper via JS, you can just add a rule to hide its contents.

.content-wrapper >div{
   display:none;
}

Upvotes: 3

Related Questions