Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

I have a 'show list' Button, I'm looking for help in 'hiding' that list once another 'button' is clicked...

<div class="flex-item1">

                    <h1 class="name">The Lowdown...</h1>

                        <p>Hey there, My name is Keystone.  I'm the cutest Siberian Husky you'll ever meet.
                         Take a look into what's it's like to be me....This is my life in the 
                        <b>Big City</b>.Take a quick look at what I do
                        on a pretty daily basis.  It's a tough life, but somebody has to live it.
                        These are just a few of the things I really <i>love</i>.</p>

                    <ul class="list">
                        <li><a href="sleeping.html">Sleeping</a></li>   
                        <li>Running</li>
                        <li>Playing with Pepper</li>
                        <li>Swimming</li>
                        <li>Lounging</li>
                    </ul>

            </div>
//Hide List
$(".list li").hide();
//Add button
$(".list").append("<button>Show List</button>");
//When Button is pressed (Home Page)
$("button").click(function(){
    $(".list li").show();
    $(this).remove();
$(".list").append("<button>Hide List</button>");
$("button").click(function(){
        $(".list").show();
    });

});
jag
jag
18,266 Points

Clicking the list will show the clicked list and hide any other open list?

jag - Once the 'button' is clicked and the '.list' is shown, I want to be able to click another button and hide the list again(so everything is back in the original form).

1 Answer

Steven Parker
Steven Parker
216,057 Points

:point_right: You could make the button function just toggle the list visibility.

And then, instead of removing and adding the button, just change the text on it based on if it became visible or not.

$("button").click(function() {
  if ($(".list li").toggle().is(":visible")) {
    $("button").text("Hide List");
  } else {
    $("button").text("Show List");
  }
});

Suggestion: Adding something to a ul other than a li may work, but it's not "best practice". An improvement would be to add the button outside the ul. By using the toggling handler, you could just place it below the list in the HTML and eliminate the JQuery line that appends it to start with.