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

Kevin S
Kevin S
15,618 Points

Does This Work on Image Content?

Hi all,

(having trouble posting my code, so I will try simply asking a question about what I think is causing my problem).

I'm trying to apply the code for hiding and showing content to a demo website from Brad Traversy's video on Youtube (its great by the way... definitely shoring up my html /css knowledge).

Anyway, I'm simply trying to create a button called "hide the pics" that simply hides a couple of pictures and text that is displayed between the tags with the id "section". I copied the javascript for hiding and showing content verbatim and changed it to target the content of my demo page. However when i click the button I'm just taken to the top of the screen and the content remains unchanged.

Does the code for hiding and showing content work if the content that is targeted contains images as well as text? I have a hunch that the images are the reason why it does not work.

Thanks!

1 Answer

Dale Jones
Dale Jones
9,025 Points

Hi Kevin,

I have added some code doing just this (I tried it out for ya!). Please excuse any silly names ect, it works for me.

const toggleList = document.querySelector('.img') //Creates a var from the div element
const toggleImg = document.querySelector('button') // Creates a var from the button

toggleImg.addEventListener('click', ()=> { //Listens to when the button is clicked
    if (toggleList.style.display === 'none'){ //If the style is none then it will run this
        toggleImg.textContent='Hide Image'; //Changes the text of button
        toggleList.style.display='block'; //Changes the pictures syle to block (already stored the div in toggleList)

    }
    else{                               // Otherwise run this
        toggleImg.textContent='Show Image'; //Changed text in button
        toggleList.style.display='none'; // Changes display of the div to none

    }
})

Here is the HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class='img'> <!-- Creates a div for the pictures I want hidden -->

        <!-- Pictures -->
        <img src="https://placeimg.com/440/280/any" alt="" class="image">
        <img src="https://placeimg.com/440/280/any" alt="" class="image">
        <img src="https://placeimg.com/440/280/any" alt="" class="image">
    </div>

    <!-- Button to hide/show pictures -->
    <button type="button">Hide Image</button>

    <script type="text/javascript" src="js.js"></script>
</body>
</html>