CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rotan075
Rotan075

Reputation: 2615

Set display of div by using the data-target attribute

Hello I got a question regarding setting the display of a div with the use of the data-target attribute. I have the following HTML code:

<div class="page page-current" id="home">
PAGE 1
  <a href="#" class="next" data-target="#about">Go to about</a>
</div>

<div class="page page-section" id="about">
PAGE 2
  <a href="#" class="next" data-target="#portfolio">Go to portfolio</a>
</div>

<div class="page page-section" id="portfolio">
  PAGE 3
</div>

As can seen above, the div's that contain the class: page-section are initial hidden by CSS using: display:none. Now I managed to create a generic JS code that checks which div should be made visible:

$(".next").click(function(){
    var target = $(this).data("target");
  $(target).addClass("page-current");  
})

The problem with this is that it adds to the second div the class: page-current but the first div also still contains this class.

Can anyone guide me in the right direction how I could solve this is in a generic way so that only one div at the time can contain the class: page-current

I have created a JSFIDDLE of this problem.

Upvotes: 4

Views: 6939

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337637

To do what you require you need to remove the page-current from the current page, and add it to the new element, while removing page-section from the new element and adding it back on to the old.

You can do this by using the toggleClass() method, like this:

$(".next").click(function() {
    var target = $(this).data("target");
    $('.page-current').add(target).toggleClass('page-current page-section');
})

Working example

Upvotes: 6

Related Questions