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

Tobi Bankole
Tobi Bankole
2,901 Points
Posted by 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 + ':';                        
});
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

Can you post your html?

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

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
Tobi Bankole
Tobi Bankole
2,901 Points

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

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 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
Tobi Bankole
Tobi Bankole
2,901 Points

Here is the snapshot of my workspace:

https://w.trhou.se/wf82vx2656