Rotan075 Rotan075 - 4 months ago 17
HTML Question

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.

Answer

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