jQuery slideDown and slideUp strange behaviour

Question

I am having a small issue with some jQuery I have written. I have two buttons which both have a hidden div underneath them. When the button is clicked, the appropriate div is then animated into or out of view using slideDown or slideUp. The problem I am having is that when the slideUp is called (to hide the div) it is hiding the button as well. This is incorrect as the buttons need to stay where they are and only the divs with the tables in them need to be animated.

I have created a jFiddle below to better explain what I mean:

http://jsfiddle.net/nH5N7/

And here is my code:

HTML:

<div id="rightContent"> 
            <div class="" id="yourAssessments">
                <h3>Your Assessments</h3>
                <div class="innerPadding">      
                    <h4>Please choose an assessment: </h4>          

                        <div class="onlineModuleAssessmentWrapper">
                            <div class="assessmentButton" data-assessment-id="1">Swim Instructor Default</div>
                            <div data-assessment-id="1" class="assessmentTableWrap">
                                <table>

                                        <tr>
                                            <td>
                                                Planning                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Doing It                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Learning and Communication Styles/Techniques                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Debrief                                             </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>
                                                                        </table>
                            </div>
                        </div>

                        <div class="onlineModuleAssessmentWrapper">
                            <div class="assessmentButton" data-assessment-id="3">Test Assessment 3</div>
                            <div data-assessment-id="3" class="assessmentTableWrap">
                                <table>

                                        <tr>
                                            <td>
                                                Planning                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Doing It                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Learning and Communication Styles/Techniques                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Debrief                                             </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>
                                                                        </table>
                            </div>
                        </div>

                </div>
            </div>

jQuery:

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", '.assessmentButton', function () {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id");
    if (jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").is(":hidden")) {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideDown("slow");
    } else {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideUp("slow");
    }
});

Can anybody see why this is happening or where I am going wrong? Thanks!!

Answer 1

You have the same data-assessment-id in your container and in your "button" so jquery hides both. Check this : http://jsfiddle.net/nH5N7/4/

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", '.assessmentButton', function() {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
    linkedAssessmentId++
    console.log(linkedAssessmentId)

    if(jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").is(":hidden")) {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideDown("slow"); 
    } else {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideUp("slow");   
    }

});

html:

<div id="rightContent"> 
                <div class="" id="yourAssessments">
                    <h3>Your Assessments</h3>
                    <div class="innerPadding">      
                        <h4>Please choose an assessment: </h4>          

                            <div class="onlineModuleAssessmentWrapper">
                                <div class="assessmentButton" data-assessment-id="1">Swim Instructor Default</div>
                                <div data-assessment-id="2" class="assessmentTableWrap">
                                    <table>

                                            <tr>
                                                <td>
                                                    Planning                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Doing It                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Learning and Communication Styles/Techniques                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Debrief                                             </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>
                                                                            </table>
                                </div>
                            </div>

                            <div class="onlineModuleAssessmentWrapper">
                                <div class="assessmentButton" data-assessment-id="3">Test Assessment 3</div>
                                <div data-assessment-id="4" class="assessmentTableWrap">
                                    <table>

                                            <tr>
                                                <td>
                                                    Planning                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Doing It                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Learning and Communication Styles/Techniques                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Debrief                                             </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>
                                                                            </table>
                                </div>
                            </div>

                    </div>
                </div>

Answer 2

When you run the 'hide' code, you run it on the button, not the div afterwards.

Fiddle updated: http://jsfiddle.net/nH5N7/6/

jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").next().slideUp("slow");

Changed line above with '.next()' added in...

Answer 3

First, make sure your IDs are unique (maybe you can even get rid of all of them). Then, this should do the work:

jQuery(".assessmentTableWrap").hide();

jQuery(document).on("click", ".assessmentButton", function () {
    jQuery(this).next(".assessmentTableWrap").slideToggle();    
});

Demo: http://jsfiddle.net/nH5N7/7/

Answer 4

I'd suggest you change your code to this:

jQuery(".assessmentTableWrap").hide();

jQuery("#yourAssessments").on("click", ".assessmentButton", function () {
    $(this).closest(".onlineModuleAssessmentWrapper")
        .find(".assessmentTableWrap")
        .slideToggle();
});

This gets the parent wrapper that includes the currently clicked on button, then finds the .assessmentTableWrap in that common container and then toggles it's slide state. You don't have to put all those data-assessment-id attributes in your HTML to do this. Going up to the common parent rather than just using .next() makes the code less dependent upon your exact HTML (e.g. less likely to break in the future if another div is inserted somewhere).

This code also picks a more efficient parent for the delegated event handling (best not to put them all on document).

Answer 5

All the above answers are correct.

Another way which may be helpful for you if you need to capture using "linkedAssessmentId"

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", ".assessmentButton", function () {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
    jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").next(".assessmentTableWrap").slideToggle();    
});

or

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", ".assessmentButton", function () {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
   $(this).next("div[data-assessment-id=" + linkedAssessmentId + "]").slideToggle();    
});