How do I hide all but span elements within a list on button click?

Question

Hi folks, Really hoping to get this finished up, and sadly I don't have enough experience to do these last steps. I have a long unordered list that will toggle closed with a button push and show only certain elements of the list. That is working great, but the problem is that I need to only show text within a span in that list. I saw a tutorial online yesterday that was doing something like this: $("#bio li:not(.remain>span)").toggle("slow");

but that doesn't work-I think I'm doing it wrong. What I have so far is this:

$(function() {
    $("#toggle_bio").click(function() {
        $(this).toggleClass("collapsed");
        $("#bio li:not(.remain)").toggle("slow");
        return false;
    });
});


<ul id="bio">
    <li>Long bio text.</li>
    <li class="remain">text will remain.</li>
    <li>Long bio text.</li>
    <li class="remain">text will remain.</li>
    <li>Long bio text.</li>
    <li>Long bio text.</li>
</ul>

<a id="toggle_bio" href="#">Toggle bio</a>

Now this works great, but I need to accomplish two more things:

1) I need to have only the text inside a span remain within the .remain list:

<li class="remain">This text will go away <span>But this text will stay</span></li>

And, I need to change this toggle button to be two buttons:

<a id="toggle_bio" href="#">Toggle bio</a>

into something like:

<a id="longBio" href="#">Long Bio</a><a id="shortBio" href="#">Short Bio</a>

I'm still really new to javascript, so please keep that in mind when you answer. If possible, I don't want to have to change the whole logic of the solution I have-rather modify one or two elements to make this work. Thank you!

Answer 1

The problem with your new markup is that the span is on the same level as the text node, but text nodes cannot be targeted directly by css.

There are two approaches you could take to make this work.

1. Surround the text you want to HIDE with the span, or...
2. Use javascript to remove the text you want to hide and reinsert it on show.

The former is far simpler so instead of using

<li class="remain">This text will go away <span>But this text will stay</span></li>

Use

<li class="remain"><span>This text will go away</span> But this text will stay</li>

Then your code becomes

$("#bio li:not(.remain), #bio li.remain span").toggle("slow");

As for the links, that should be fairly simple. Just modify your click handler like this

$("#longBio, #shortBio").click(function() {
    if ($(this).attr("id") == "longBio")
        $("#bio li:not(.remain), #bio li.remain span").show("slow");
    else
        $("#bio li:not(.remain), #bio li.remain span").hide("slow");
    return false;
})

EDIT:

If you need more control of the display value used for show and hide, you can use a css class. For example:

.hidden { display:none; }

Then change your toggle function to

$("#longBio, #shortBio").click(function() {
    if ($(this).attr("id") == "longBio")
        $("#bio li:not(.remain), #bio li.remain span").removeClass("hidden");
    else
        $("#bio li:not(.remain), #bio li.remain span").addClass("hidden");
    return false;
});

Answer 2

Alternatively, something along the lines of:

$("#bio li:not(.remain)).hide().children('span').show();

I didn't test that code, but it should work because the CDATA text get's styled first to display: none, then we show the span nodes.