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'.


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 = $;
    if (!$elementToShow.length) $elementToShow = $('.symbol span').first();
    var $shownElement = $('.symbol span:visible');
    $('.symbol span').hide();


Demo screenshot



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




All Articles