Expanding a <section> with a click event

Language Help JavaScript
1

I’m trying to make a Portfolio Website where there’s only the project title shown. When you click on the project it will expand to show more information (see the screen shot below).

When I inspect the website there isn’t any Event Listeners showing. Have I broken something?

Screenshot 2023-07-28 100001
Screenshot 2023-07-28 100001888×255 9.47 KB

HTML:

<section id="portfolio" class="container border">
        
        <section class="project-block border">
        
            <section class="down-button project-heading border">
                Project One
            </section>
            <section class="project-window">
                <img src="images\websiteScreenshot.jpeg" width="600" height="auto"/>
            </section>

        </section>

        <section class="project-block border">
        
            <section class="down-button project-heading border">
                Project Two
            </section>
            <section class="project-window">
                <img src="images\websiteScreenshot.jpeg" width="600" height="auto"/>
            </section>

        </section>

Javascript:

let downButton = document.querySelectorAll('down-button');
let upButton = document.querySelectorAll('up-button');
let projectWindow = document.getElementsByClassName('project-window');

function expand() {
    downButton.style.display = 'none';
    projectWindow.style.display = 'block';
    upButton.style.display = 'block';
};

function hide() {
    downButton.style.display = 'block';
    projectWindow.style.display = 'none';
    upButton.style.display = 'none';
};


downButton.forEach((button) => {
    button.addEventListener('click', expand); 
});

upButton.forEach((button) => {
    button.addEventListener('click', hide); 
});
2

My only comment relates to bubbling, which if this is still not learned should not be ignored, but followed up. Have you considered the load being placed on the system when there are so many idle listeners? Once you study bubbling it won’t be long before you bring this down to one. Yes, one. Take the time to learn how this is done. It’s called ‘delegation’, and saves a massive amount of memory and clock ticks.

3

Honestly, you could solve this the JavaScript way, and I respect that. However, there is a native HTML element perfect for exactly your use case. It’s called the Details element and would look like this:

<details>
  <summary>Project One</summary>
  <img />
</details>
<details>
  <summary>Project Two</summary>
  <img />
</details>

Don’t get me wrong; I love JavaScript. But I would say there’s no need to reinvent the wheel here.

Here’s the link to the MDN page in case you need more info, like how to style it: <details>: The Details disclosure element - HTML: HyperText Markup Language | MDN

2 Likes
4

THANK YOU SO MUCH! This is exactly what I was trying to do, not realising there was a simpler way in HTML. Amazing, you’re a legend.