How to show HTML on class change with JQuery

Question

I have a link bar pinned to the right-hand side of the screen. As the user scrolls, the bullet points grow depending on what section the user has scrolled to (acts as an anchor to help users navigate up/down the page.

I have tags next to each bullet point, displaying a description of each link/scroll point. I want to display each span tag ONLY when the respective link/bullet-point is highlighted (when the class="selected" is set on the "li" element).

How can I detect the class="selected" on the li element, and display the contents of the respective span tags if class="selected" is present?

<div id="sidemenu">
<ul>
    <li id="welcomeLi" class="selected"><table><tr><td><span>Welcome</span></td><td><a href="#home">&bull;</a></td></tr></table></li>
    <li id="mantraLi"><table><tr><td><span>Our mantra</span></td><td><a href="#mantra">&bull;</a></td></tr></table></li>
    <li id="softwareLi"><table><tr><td><span>Our software</span></td><td><a href="#software">&bull;</a></td></tr></table></li>
    <li id="involvedLi"><table><tr><td><span>Get involved</span></td><td><a href="#involved">&bull;</a></td></tr></table></li>
    <li id="contactLi"><table><tr><td><span>Contact us</span></td><td><a href="#contact">&bull;</a></td></tr></table></li>
</ul>

http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed — FLCL, Oct 29 '13 at 13:46

damian · Accepted Answer · 2013-10-29T14:02:51.180

1

If I understood you right, the classes change as the user scrolls down/up?

You could detect when the user stopped scrolling and hide all li elements and show the specific with the class selected.

EDIT

DEMO

$('#sidemenu ul li:not(.selected) span').hide();

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('#sidemenu ul li:not(.selected) span').hide();
        $('#sidemenu ul li.selected span').show();
    }, 250));
});

edited Oct 29 '13 at 14:02

answered Oct 29 '13 at 13:41

damian

5,314
5
34
63

Yes, the class "selected" is added to the "li" elements dependent on scroll position. I would like the bullet points to remain constantly visible however, with only the span-tag description visible when the "selected" class is active on that particular li. – OllyBarca Oct 29 '13 at 13:48

score 0 · Answer 2 · answered Oct 29 '13 at 13:35

0

you can try this

 $("#sidemenu ul li").each(function(n,element){
    if ( $(element).hasClass('slected') ) 
    {
    //do your stuff
    }
 });

answered Oct 29 '13 at 13:35

Manwal

23,450
12
63
93

How to show HTML on class change with JQuery

2 Answers2