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

General Discussion

Posted by Christian Solorzano
Christian Solorzano
6,606 Points

How to make list that expands when user clicks on <lh>?

I'm working on a website that requires a nested list.

So far, I have one list heading when the user clicks on it, I want a sublist to appear and when you click on a list heading within that, another list appears and so on.

My code right now looks like this.

<ul> <lh>Taxes</lh> <ul> <lh>General Tax Theory</lh> <ul> <lh>Classic Works</lh> <li>The Problem of Social Cost</li> <li>The Economics of Welfare</li> <li>The Theory of Environmental Policy</li> </ul> <ul> <lh>Survey Articles</lh> <li>Carbon-tax-broader-us-fiscal-reform.pdf</li> <li>Carbon_Taxes-A_Review_of_Experience_and_Policy_Design_Considerations.pdf</li> <li>Chapter 23 Environmental taxation and regulation</li> <li>Environmental_Taxation_A_Guide_for_Policy_Makers.pdf</li> </ul> </ul> </ul> <ul> <ul> <lh>Distributional Impacts</lh> <li>Distributional impacts of carbon pricing: A general equilibrium approach with micro-data for households</li> <li>Energy and carbon taxes and their distributional implications</li> <li>Mitigating the Distributional Impacts of Climate Change Policy</li> <li>Reducing the impact of 'green' taxes and charges on low-income households | Joseph Rowntree Foundation</li> <li>The economics of US greenhouse gas emissions reduction policy : assessing distributional effects across households and the 50 United States using a recursive dynamic computable general equilibrium (CGE) model</li> <li>Who_Pays_for_Climate_Regulation_Kolstad.pdf</li> </ul> </ul> <ul>

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

You can do this really simply using the jQuery JavaScript library. To be clear, you can do this with JavaScript as well, it's just much simpler and less tedious to write it using jQuery.

<!-- Include a JQuery MDN in your HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

/* Don't display the list items by default. */
li { display: none; }

// When you click on a list heading, display all the list items related to that heading.
$("lh").click(function() {
  $(this).nextAll().slideToggle(400);
});

This might be beyond the scope of what you've learned so far. If so, I would recommend the JavaScript Basics, JavaScript Loops, Arrays, and Objects, and jQuery Basics courses.

Happy coding!

Christian Solorzano
Christian Solorzano
6,606 Points

Thanks. I'm giving this a try right now. My issue is that I'm trying to set the li to display none. However, on my page I have multiple list items that I wish to continue to display such as my menu.

Based on my code that I posted above, how can I select those list items? I gave the ul a class of topic list and in my css I did

.topiclist ul li 
{
display:none;
}

but that's not working

Edit:

it seems like 

 $(this).nextAll().slideToggle(400);

isn't doing anything

rydavim
rydavim
18,814 Points

I'm not sure why your CSS wouldn't be working if you've added that class to the lists. The jQuery line is likely not working if you haven't linked the library in your html header, before running the script.

I'm happy to help you figure this out, but you'll need to post the structure of your website using workspace and creating a snapshot with the camera icon in the top left, or something like codepen. It's difficult to diagnose your problems without being able to see everything.