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>