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 JavaScript and the DOM (Retiring) Making Changes to the DOM Styling Elements

Tobi Bankole
Tobi Bankole
2,901 Points

Show List tab not functioning correctly

I have an issue where following the steps of this video, at around 6min 44s, Guil demonstrates the code where you can toggle to see the content using a Hide List/Show List condiitonal. I cannot for the life of me manage to get it to toggle between Show List and Hide List, it just seems to disappear completely for me. Please advise me where I am going wrong (for reference, what I am trying to describe occurs from 6min 52 to 6min 56):

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const input = document.querySelector('input');
const p = document.querySelector('p.description');
const button = document.querySelector('button');

toggleList.addEventListener('click', () => {
 if(listDiv.style.display == 'none') {
  toggleList.textContent = 'Hide List';
  listDiv.style.display = 'block'; 
} else {
  toggleList.textContent = 'Show List';
  listDiv.style.display = 'none';
}
});

button.addEventListener('click', () => {
  p.innerHTML = input.value + ':';                        
});

Can you post your html?

2 Answers

Your toggleList button is inside your list div so it gets hidden along with everything else. Reverse the order of these two lines so the button isn't included in the div

<div class="list">
<button id="toggleList">Hide List</button>  
Tobi Bankole
Tobi Bankole
2,901 Points

wow, I feel like a fool lol, thank you very much!

Steven Parker
Steven Parker
216,165 Points

The show/hide list functions in this code are good. Perhaps there's an isssue in the HTML part of the code.

To facilitate the most complete analysis, make a snapshot of your workspace and post the link to it here.

Tobi Bankole
Tobi Bankole
2,901 Points

Here is the snapshot of my workspace:

https://w.trhou.se/wf82vx2656