jQuery and php accordion menu doing weird thing - php

Question

So I've got this little accordion menu I made using jQuery and php.
It works well apart from the fact that when I click hide all items it opens everything then closes it, when show all is clicked it hides everything then shows it.
I want if i press hide all to hide it straight away without showing everything first and the other way around when show all is clicked.
I'm using count() to count the items in the menu then incrementing it by one when the function ends.
Anyway, here's the code:
jQuery:
<script type="text/javascript">
$ = jQuery;
$( document ).ready(function () {
$( "#heading_<?php echo $count; ?>, .personal-lessons-show-all, .personal-lessons-hide-all" ).on("click", function () {
$( "#lessons_<?php echo $count; ?>" ).slideToggle().css( "display", "block" );
$( "body" ).css( "background-color", "#eee" );
$( ".right-purple-background" ).css( "height", "1124px" );
});
$( ".personal-lessons-show-all" ).on( "click", function () {
$( "#lessons_<?php echo $count; ?>" ).slideDown();
$( ".personal-lessons-hide-all" ).show();
$( "body" ).css( "background-color", "#eee" );
$( ".right-purple-background" ).css( "height", "1124px" );
});
$( ".personal-lessons-hide-all" ).on( "click", function () {
$( "#lessons_<?php echo $count; ?>" ).slideUp();
$( ".personal-lessons-hide-all" ).hide();
$( "body" ).css( "background-color", "white" );
$( ".right-purple-background" ).css( "height", "1200px" );
});
$( ".bordered-title" ).on( "hover", function () {
$( this ).css( "cursor", "pointer" );
});
});
</script>
And the php:
<?php
// Loop through all of the lesson categories
$count = 0;
foreach($lessons as $key => $val){
$count++;
// Get personal lessons for logged in user
$personal_lessons = get_user_meta(get_current_user_id(), 'personal-lessons', true);
$yes_to_all = false;
if(empty($personal_lessons[$_GET['course']]) || !$personal_lessons[$_GET['course']]){
$yes_to_all = true;
}
$category_name = $wpdb->get_row("SELECT name FROM mdl_course_categories WHERE id = '$key'");
?>
<p class="bordered-title" id="heading_<?php echo $count; ?>"><?php echo $category_name->name; ?></p>
<div class="table-responsive">
<table id="lessons_<?php echo $count; ?>" class="lessonsTable table-responsive">
<?php