Jquery slideDown() not working correctly

Question

I have a form with 3 sections to it. At the beginning of the form, the latter two sections are hidden using css. Once the user presses the next button in the first section, the second section should slide down into view, however currently the animation to slide down begins and then resets immediately. Does anyone know the problem?

Jquery script:

<script> 
        $(document).ready(function(){
            $("#buttonToSecondaryDetailsSection").click(function(){
                $("#secondaryDetailsForm").slideDown("slow");
            });

            $("#buttonToCommentsSection").click(function(){
                $("#commentsDetailsForm").slideDown("slow");
            });
        });
</script>

CSS in question:

#secondaryDetailsForm, #commentsDetailsForm {
display: none;
}

Edit: I've tried using .show() instead of slideDown() before and the section just flashes before disappearing again.

Edit 2: e.preventDefault(); did the trick. Sorry for the messy question, tried to get an example working with jsfiddle but it was throwing errors left right and center.

Answer 1

This may be a solution to your issue. Thinking of your description I suppose that your buttons are doing more than they should and what actually happens is that the page is refreshing to the original state. Can you try this?

    $(document).ready(function(){
        $("#buttonToSecondaryDetailsSection").click(function(e){
            e.preventDefault();
            $("#secondaryDetailsForm").slideDown("slow");
        });

        $("#buttonToCommentsSection").click(function(e){
            e.preventDefault();
            $("#commentsDetailsForm").slideDown("slow");
        });
    });

The difference with your code is taking e as the event parameter and later stop any more actions happening with the buttons. If my description of the problem is what actually happens then it should work with this change.

Answer 2

I guess after the effect that you add to the component, it takes the css attribute you gave him before.

<script> 
        $(document).ready(function(){
            $("#buttonToSecondaryDetailsSection").click(function(){
                $("#secondaryDetailsForm").slideDown("slow");
                $("#secondaryDetailsForm").css("display","block");
            });

            $("#buttonToCommentsSection").click(function(){
                $("#commentsDetailsForm").slideDown("slow");
                $("#secondaryDetailsForm").css("display","block");
            });
        });
</script>

Dut to the lack of code you gave us I cannot make a jsFiddle but try this please.

Answer 3

use this code: it is working at my end there's no change in script (same jquery code that you are using). check your HTML. and try using e.preventDefault(); as mentioned by " thanpa " above

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
#secondaryDetailsForm, #commentsDetailsForm {
display: none;
height:200px;
}
#section1{
height:200px;
}
</style>
<div id = 'section1'>
<p>Section 1</p>
<button id ='buttonToSecondaryDetailsSection'> click me </button>
</div>
<div id = 'secondaryDetailsForm'>

<p>Section 2</p>
<button id ='buttonToCommentsSection'> click me </button>
</div>
<div id = 'commentsDetailsForm'>

<p>Section 3</p>
</div>

<script>
      $(document).ready(function(){
            $("#buttonToSecondaryDetailsSection").click(function(){
                $("#secondaryDetailsForm").slideDown("slow");
            });

            $("#buttonToCommentsSection").click(function(){
                $("#commentsDetailsForm").slideDown("slow");
            });
        });
</script>