Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Build an Interactive Website Introduction to jQuery Including jQuery in our Project

Julian Ptak
Julian Ptak
30,920 Points
Posted by Julian Ptak
Julian Ptak
30,920 Points

JQuery Hide/Show and Visibility: How complex can your anonymous functions be as click listeners?

Hey Treehousians,

Me again! I've been working on a JQuery project similar in some ways to the one in the "Interactive Websites" course. There's just a few things I don't quite grasp.

JQuery's .hide() and .show() functions are used in the video to click a link, make that link disappear, and show a div in its place. I'm looking to do something similar but I'm afraid I don't understand the symptoms my website is showing me because I'm so new to JQuery. What I'm trying to do is make a list of items/links. When I click the link, it expands a p tag with a summary about the list. But I don't want the list item to disappear because I want to be able to expand and contract the various summary p tags in the list. What I'm aiming for is just a standard expanding and contracting list.

My thought on how to solve it: I attacked the problem by figuring that I could add "if" statements to the anonymous function to check for the visibility of the next item. So I would do what the video does, click a link, grab the next object (a "p" tag), check to see if it is hidden, if it isn't, hide it. If it is, show it. Here's my code: JavaScript/JQuery:

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(".listPointSummary").hide();
    $(".expandable").click(function() {
        var $link = $(this);
        var expand = $link.next();
        if(expand:hidden){
            expand.show();  
        } else {
            expand.hide();
        }
        });
    </script>

And its relevant HTML section:

<li><p class="expandable"><a href="#" class="expand">Item 1</a></p><p class="listPointSummary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu quam eu nibh placerat tincidunt eget non risus. Vivamus mollis congue congue.......
</p></li>

Each list item looks like that. I truncated the content so you wouldn't have to read through nonsensical Latin to get to the code. ;)

A search on how to check for the hidden/visible status of an object turned this up: http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-with-jquery/178386#178386

But as is usually the case with the answers I find on Stack Overflow, while I'm sure it's correct, I'm not precisely sure how implement it. So I took a shot in the dark. Assuming it is checking for visibility properly, the website now no longer hides the summary sections upon page load. They are all visible.

My best guess is that I'm using .next() incorrectly. Could someone please show me how to check for visibility and how to traverse through the HTML to the next object with the .next() function correctly? Or is it a problem with .hide() and .show()?

2 Answers

austenpayan
austenpayan
10,218 Points

Try this out:

$(document).ready(function(){

    var $summaries = $(".listPointSummary");

    function showSummary() {
        $summaries.each(function(){
            if( $(this).hasClass('active') ) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    $summaries.hide();

     $(".expandable").click(function() {
            $summaries.removeClass('active');
            $(this).next().addClass('active');
            showSummary();
    });

});

I did a few things here. First I cached the summary elements in the variable $summaries. Then I wrote a function called showSummary that calculated whether or not to show the certain summary. Instead of using the :hidden method like you used earlier, I used a class assignment to determine whether a summary should be shown or not. In the click event, the class "active" is removed from all summary elements, and then the summary after the clicked "expandable" is given a class of active. Then the function is called, which checks each summary for the class "active", showing those that have it and hiding those that dont.

There is probably a more efficient way to do this, I put it together rather quickly, but it should help you. I made a jsfiddle with a working example : http://jsfiddle.net/austenpayan/yk9d8/1/

khoipro
khoipro
10,821 Points
khoipro
khoipro
10,821 Points

Hi,

I got the same problem. Currently I want to build a demo tool which each setting can apply to current site.

I have these divs like:

<div class="grid layout-1">
  <div class="content-list">
    <ul>
     <li>Content</li>
    </ul>
  </div>
</div>

Now, the layout can change from layout-1 to layout-4. I just want to display content-list to layout-1 only, not all layout.

How to make a condition to automatic hide this div if parent class is not layout-1?

Thank you,