Why is my div not hiding, in jQuery?

Question

I'm trying to make a layout for a quiz for school. I'm only starting right now and the idea is to have the questions disappear when the button 'next question' is clicked.

The problem arises after the second question because instead of the first question begin hidden, it's not.

I tried adding extra lines like $("#one").hide(); , but it didn't do anything. I'm not really sure what I'm doing wrong, I am only new to coding so I would appreciate the help.

PS: Don't mind the text I just wanted to get the layout right first.

 $(document).ready(function() { "use strict"; $("#one").hide(); $("#two").hide(); $("#three").hide(); $("#four").hide(); $("button").click(function() { $("#header").animate({ opacity: '0.2', width: 'hide' }, '500'); $("#one").animate({ width: 'show' }); }); $("#button1").click(function(e) { $("#one").animate({ opacity: '0.2', height: 'hide' }); e.stopPropagation(); $("#two").animate({ width: 'show' }); }); $("#button2").click(function() { $("#two").animate({ opacity: '0.2', height: 'hide' }, '500'); $("#three").animate({ width: 'show' }); }); $("#button3").click(function() { $("#three").animate({ opacity: '0.2', height: 'hide' }, '500'); $("#four").animate({ width: 'show' }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="right"> <div id="header"> <h1>SUBCULTURE <br> FASHION</h1> <p>Aliquam ac leo ipsum.....</p> <button id="button">Start quiz</button> </div> <div id="one"> <h2>Question 1</h2> <h3>What colour pallete do you prefer?</h3> <form action=""> <input type="radio" name="colour" value="male"> Brown, Baige, Pale<br> <input type="radio" name="colour" value="female"> Black, Grey, Silver<br> <input type="radio" name="colour" value="other"> Pink, Blue, Purple<br> <input type="radio" name="colour" value="him"> White, White and only white </form> <button id="button1">Next Question</button> </div> <div id="two"> <h2>Question 2</h2> <h3>What is your favourite teddy bear?</h3> <form action=""> <input type="radio" name="colour" value="male"> Brown, Baige, Pale<br> <input type="radio" name="colour" value="female"> Black, Grey, Silver<br> <input type="radio" name="colour" value="other"> Pink, Blue, Purple<br> <input type="radio" name="colour" value="him"> White, White and only white </form> <button id="button2">Next Question</button> </div> <div id="three"> <h2>Question 3</h2> <h3>What is your favourite teddy bear?</h3> <form action=""> <input type="radio" name="colour" value="male"> Brown, Baige, Pale<br> <input type="radio" name="colour" value="female"> Black, Grey, Silver<br> <input type="radio" name="colour" value="other"> Pink, Blue, Purple<br> <input type="radio" name="colour" value="him"> White, White and only white </form> <button id="button3">Next Question</button> </div> <div id="four"> <h2>Question 4</h2> <h3>What is your favourite teddy bear?</h3> <form action=""> <input type="radio" name="colour" value="male"> Brown, Baige, Pale<br> <input type="radio" name="colour" value="female"> Black, Grey, Silver<br> <input type="radio" name="colour" value="other"> Pink, Blue, Purple<br> <input type="radio" name="colour" value="him"> White, White and only white </form> <button id="button4">Next Question</button> </div> </div> 

Here's a link to JFiddle: http://jsfiddle.net/xpvt214o/120767/

Answer 1

The problem is on your first button click. You are using $('button') which applies the click event to all buttons. It should be #button so the event is only applies to the button with the id of button.

// $("button").click(function() {     
$("#button").click(function() {     
    $("#header").animate({
        opacity: '0.2',
        width: 'hide'
    }, '500');
    $("#one").animate({
        width: 'show'
    });
});

And just a recommendation, you could easily update this to be handled by one button click event. You could add a class of question to each div and use jQuerys closest() to grab that div to hide it. You could then use jQuerys next() to grab the next question div and show it. Hopefully that will get you headed in the right dorection. Since this is for school, I will leave you to connect the dots.

Answer 2

If it makes sense, try to reuse code. Also use descriptive names, it will help prevent the "#button" vs. "button" problem if you have something like <button id="btn-start">

I've made some changes for efficiency in the code below.

<div id="right">
    <div id="header">
        <h1>SUBCULTURE <br> FASHION</h1>
        <p>Aliquam ac leo ipsum. Curabitur imperdiet mi sed tortor iaculis, sed commodo neque euismod. Sed tempus interdum venenatis. Nullam auctor placerat porttitor. Donec faucibus lectus leo, non ornare libero varius ut. Ut nisi augue, laoreet vel blandit et, interdum vel quam. Maecenas auctor aliquet ante at auctor. Sed facilisis nulla et porttitor posuere. Praesent hendrerit odio non nunc venenatis ornare. Maecenas varius ac justo vel rhoncus. Suspendisse potenti. Nulla porta malesuada neque, a sagittis lacus pretium at. Duis vitae turpis ut ligula porttitor consequat. Quisque bibendum laoreet scelerisque. Morbi sed tellus vel odio eleifend cursus at non ex. Donec semper lorem sed mauris feugiat.</p>
        <button data-next="one">Start quiz</button>
    </div>

    <div id="one" class="question">
        <h2>Question 1</h2>
        <h3>What colour pallete do you prefer?</h3>
        <form action="">
            <input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
            <input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
            <input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
            <input type="radio" name="colour" value="him"> White, White and only white
        </form>
        <button data-next="two">Next Question</button>
    </div>
    <div id="two" class="question"><h2>Question 2</h2>
        <h3>What is your favourite teddy bear?</h3>
        <form action="">
            <input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
            <input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
            <input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
            <input type="radio" name="colour" value="him"> White, White and only white
        </form>
        <button data-next="three">Next Question</button>
    </div>
    <div id="three" class="question"><h2>Question 3</h2>
        <h3>What is your favourite teddy bear?</h3>
        <form action="">
            <input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
            <input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
            <input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
            <input type="radio" name="colour" value="him"> White, White and only white
        </form>
        <button data-next="four">Next Question</button>
    </div>
    <div id="four" class="question"><h2>Question 4</h2>
        <h3>What is your favourite teddy bear?</h3>
        <form action="">
            <input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
            <input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
            <input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
            <input type="radio" name="colour" value="him"> White, White and only white
        </form>
        <button>Next Question</button>
    </div>
</div>

Script changes

$(document).ready(function(){
    "use strict";

    $(".question").hide(); // hide everything with "question" class.

    $("button[data-next]").click(function(){ // when any button that has a "data-next" attribute is clicked. (in this case all buttons except #four)
        $(this).parent().animate({
            opacity: '0.2',
            width: 'hide'}, '500'
        );
        // get the "data-next" attribute (from the button) and prepend a hash so jQuery can look it up by id.
        $("#" + $(this).data("next")).animate({ 
            width: 'show'
        });
    });
});