Clever Geek Handbook

How can I show / hide more than two span classes and switch between them in JQuery?

I want to switch between more than two span classes and initially only displays one class. Can I do it with JQuery. If not, any other way to solve my problem.

Sample HTML Code

<li class="symbol"><span class="off">`</span><span class="on">~</span></li>

JQuery Code Sample

$('.symbol span').toggle();

This code works fine.

Fiddle work

But I want

<li class="symbol"><span class="off">`</span><span class="on">~</span>
<span class="hinoff">a</span><span class="hinon">b</span></li>

and some JQuery code to switch between those 4 span classes and only display one initially.

This means that it first displays any of the span class, let's say span class = "off", and it displays' `. Now I want to switch to my class by clicking on my element to say span class = "hinoff" and it should show 'a'.

+3


source to share


2 answers


Calling this function should show the next one span

and hide others, no matter how many span

there are.

function showNext() {
    var $shownElement = $('.symbol span:visible').first();
    var $elementToShow = $shownElement.next();
    console.log($elementToShow);
    if (!$elementToShow.length) $elementToShow = $('.symbol span').first();
    var $shownElement = $('.symbol span:visible');
    $('.symbol span').hide();
    $elementToShow.show();
}


Demo screenshot

+3


source


To show the selected range and hide all the others, just hide them all and show the one you want:



$('.symbols span').hide();
$('.symbols span.' + selectedClass).show();
+2


source






More articles:


All Articles