CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggleclass
sebi
sebi

Reputation: 47

Show different divs and add class if div is shown

I want to show a div depending on which link is clicked.

If btn1 is clicked, link1 should get the class="activemenu" and div1 should be shown. If btn1 is clicked again, the class should be removed and the div be hidden.

If btn2 is clicked the same should happen for div2.

If one div is opened already (e.g. div1 is visible because btn1 was clicked), div1 should hide and the class should be removed from btn1 and be added to btn2 and div2 should show up.

The same should happen with btn3 and div3.

The divs are shown correctly, but the class wont be added or removed.

HTML: 

<div> 
 <a class="trigger" id="btn1" href="#box1"> Heading 1</a>
 <a class="trigger" id="btn2"  href="#box2"> Heading 2</a>
 <a class="trigger" id="btn3" href="#box3"> Heading 2</a>
</div>
<div class ="toggle" id="box1">box one content</div>
<div class ="toggle" id="box2">box two content</div>
<div class ="toggle" id="box3">box three content</div>

CSS: 

div {float:left;padding:20px}
h3 {font-size:2em; curser:pointer;}
div.toggle{display: none;}
.activemenu{font-size: 100px;}

JS: 

$("a").click(function(){
  var myelement = $(this).attr("href")
  $(myelement).slideToggle("slow");
  $(myelement).toggleClass("activemenu");
  $(".toggle:visible").not(myelement).hide();
});

Demo Code (not working properly)

Thank you very much

Upvotes: 2

Views: 1867

Answers (5)

Amar Singh
Amar Singh

Reputation: 5622

DEMO

Use $(this) to select the clicked element

    $("a").click(function(){
   var myelement = $(this).attr("href")
    $(myelement).slideToggle("slow");

        $(this).toggleClass("activemenu");
    $(".trigger").not($(this)).removeClass("activemenu");
    $(".toggle:visible").not(myelement).hide();

  });

Upvotes: 2

Sachin
Sachin

Reputation: 2148

Ok, I understand your requirement and my mistake, here is that line :

$('.trigger:not(#'+this.id+')').removeClass("activemenu");

Also changed myelement to this

$(this).toggleClass("activemenu");

So, it will remove activemenu class from all toggle divs and after then you can add the same class again.

here is the updated code

$("a").click(function(){
   var myelement = $(this).attr("href")
   $(myelement).slideToggle("slow");
   $('.trigger:not(#'+this.id+')').removeClass("activemenu");
   $(this).toggleClass("activemenu");
   $(".toggle:visible").not(myelement).hide();
});

Upvotes: 2

rrk
rrk

Reputation: 15846

First remove the class from all .toogle elements.

$("a").click(function() {
  var myelement = this.href;
  $(myelement).slideToggle("slow");
  $(this).addClass('activemenu').siblings().removeClass("activemenu");
  $(myelement).toggleClass("activemenu");
  $(".toggle:visible").not(myelement).hide();
});

Also add the proper CSS selector. .activemenu, you were using without . operator.

DEMO

Upvotes: 0

Alexis
Alexis

Reputation: 5831

You can try to add a data-box and simply show them like that :

<a class = "trigger" id="btn1" data-box="box1" href="#box1"> Heading 1</a> 
<a class="trigger" id="btn2" data-box="box2"  href="#box2"> Heading 2</a>
<a class="trigger" id="btn3" data-box="box3" href="#box3"> Heading 2</a>

Jquery

$(".trigger").click(function(){
  var element=$("#"+$(this).data("box"));
  element.toggle();
  $(".activemenu").removeClass("activemenu");
  $(element).toggleClass("activemenu");
});

Working Fiddle

Upvotes: 0

Thanga
Thanga

Reputation: 8141

Your css entry I wrong. Put '.' Before activemenu

Upvotes: 0

Related Questions