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

Kevin S
seal-mask
.a{fill-rule:evenodd;}techdegree
Kevin S
Data Analysis Techdegree Student 15,862 Points
Posted by Kevin S
.a{fill-rule:evenodd;}techdegree
Kevin S
Data Analysis Techdegree Student 15,862 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
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>