Show different divs and add class if div is shown

Question

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

in your CSS change `activemenu` to `.activemenu`. Classes are selected with a `.` — AdityaParab, Feb 02 '16 at 08:04

Sachin · Accepted Answer · 2016-02-02T08:25:18.043

2

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();
});

edited Feb 02 '16 at 08:25

answered Feb 02 '16 at 08:08

Sachin

2,152
1
21
43

The whole point of `toggleClass` is to save you from the responsibility of manually writing `addClass`/`removeClass`. :) Sure, this would work but then don't you think this is violating the spirit behind the `toggleClass` API? :) – AdityaParab Feb 02 '16 at 08:12
violating the spirit, @AdityaParab? Has our reverence for jQuery grown so much that we now run the risk of blaspheming against it? – lucas Feb 02 '16 at 08:25
Okay, I tried to use the correct code on the website but jQuery throws **Uncaught Error: Syntax error, unrecognized expression:** at me – sebi Feb 02 '16 at 08:27
Please mate.. Do not confuse `spirit`/`soul` with `religion`. :) Those two are two completely different things. Although commonly confused but they have nothing to do with one another. – AdityaParab Feb 02 '16 at 08:27

Amar Singh · Answer 2 · 2016-02-02T08:32:45.387

2

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();

  });

edited Feb 02 '16 at 08:32

answered Feb 02 '16 at 08:10

Amar Singh

5,464
2
26
55

1

Still it is wrong.. it is not removing `activemenu` class after clicking again.. check my updated answer – Sachin Feb 02 '16 at 08:19
also working code, thank you but jQuery still throws me an exception: **Uncaught Error: Syntax error, unrecognized expression: /gasthof/speisekarten/#div1** – sebi Feb 02 '16 at 08:36
when I click the link to show the div http://krieger.nmptest.de/gasthof/speisekarten – sebi Feb 02 '16 at 08:44
@sebi : change `href="gasthof/speisekarten/#div2" to href="#div2"` and same for `div1` – Amar Singh Feb 02 '16 at 08:55
`{WOCHENTAGSKARTE} ` this is the code in my HTML, gasthof/speisekarten/#div2 is made by typo3 i think – sebi Feb 02 '16 at 08:58

rrk · Answer 3 · 2016-02-02T08:17:13.723

0

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

edited Feb 02 '16 at 08:17

answered Feb 02 '16 at 08:07

rrk

15,677
4
29
45

http://jsfiddle.net/CkTRa/2593/ Updated Demo Its adding the class to the div, not the btn1/btn2/btn2 – sebi Feb 02 '16 at 08:09
@sebi I did not get you. – rrk Feb 02 '16 at 08:12
check the answer below, this is what should happen when the link is clicked the link should get bold/bigger font size not the content of the div element ;) – sebi Feb 02 '16 at 08:15

score 0 · Answer 4 · answered Feb 02 '16 at 08:08

0

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

answered Feb 02 '16 at 08:08

Thanga

7,811
3
19
38

1

Good spot. But not completely solve the issue. Upvote. – rrk Feb 02 '16 at 08:11

score 0 · Answer 5 · answered Feb 02 '16 at 08:10

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

Show different divs and add class if div is shown

5 Answers5