CODEWITHSUNDEEP
jquery
Tonzkie
Tonzkie

Reputation: 549

Jquery click on div open another div while closing others

Would someone help me modify this code of what I have below. I want when user clicks boom1 it will show booming1 and will hide booming2 and vice-versa please help.

<div id="boom1" >click me</div>
<div id="boom2" >click me</div>
<div id="booming1" style="display:none;">show on click boom1</div>
<div id="booming2" style="display:none;">show on click boom2</div>


   $("#boom1").click(function () {
      $(".booming1").show(1000);

    });
        $("#boom2").click(function () {
      $(".booming2").show(1000);

    });

Upvotes: 0

Views: 4187

Answers (4)

Solomon Closson
Solomon Closson

Reputation: 6217

Give them all the same class and manipulate them that way. And place booming1 and booming2 inside of the click me div for easier manipulation as well.

Example:

HTML:

<div class="boom" id="boom1" >click me
<div id="booming1" style="display:none;">show on click boom1</div>
</div>
<div class="boom" id="boom2" >click me
<div id="booming2" style="display:none;">show on click boom2</div>
</div>

jQuery:

$(".boom").click(function(event) {
    $(".boom").children().hide();
    $(this).children().show();
});

JSFiddle: http://jsfiddle.net/P5y2G/

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

Some changes to the dom is made, we add a class boom to the targeted element headers and a data-target which contains the selector of the element to be displayed. Also we add a class booming to the target elements so that they can be identified.

We add a click handler to the boom element, inside the handler we get the target of the boom using the data-target and hide all targets elements of type booming

<div class="boom" data-target="#booming1" >click me</div>
<div class="boom" data-target="#booming2" >click me</div>
<div id="booming1" class="booming" style="display:none;">show on click boom1</div>
<div id="booming2" class="booming" style="display:none;">show on click boom2</div>

and

$(".boom").click(function () {
    var $target = $($(this).data('target'));
    $(".booming").not($target).hide();
    $target.show();
});

Demo: Fiddle

Upvotes: 4

lukeocom
lukeocom

Reputation: 3243

An easy approach to this sort of task is to toggle a class on the divs you want to hide or show.

You JS would go something like this..

$('#boom1').click(function(){
  $('.active').removeClass('active').hide();         
  $('#booming1').show(1000).addClass('active');

});//end boom1 click

$('#boom2').click(function(){
  $('.active').removeClass('active').hide();  
  $('#booming2').addClass('active').show(1000);

});

Here is an example - http://jsfiddle.net/VgbvF/

Upvotes: 0

arb
arb

Reputation: 7863

There are a couple different ways to do this, but here is one that doens't require much change on your part

(function() {
  var $booming1,
    $booming2;

  $(function() {
    $booming1 = $("#booming1");
    $booming2 = $("#booming2");

    $("#boom1").click(function() {
      $booming1.show(1000);
      $booming2.hide()
    });
    $("#boom2").click(function() {
      $booming2.show(1000);
      $booming1.hide();
    });
  })
}(jQuery))

Upvotes: 1

Related Questions