CSS class specification in selector

Question

In my code, why does the color not toggle to yellow? jQuery's slideUp returns a jQuery object so I don't see the problem of why this does not work.

$(document).ready(function () {

    $(".accordion h3:first").addClass("active");
    $('.accordion p:not(:first)').hide();

    $('.accordion h3').on('click', function (e) {
        $(this).next('p')
            .slideToggle('slow')
            .siblings('p:visible')
            .slideUp('slow')
            .toggleClass('active')
            .siblings("h3").removeClass("active");
    });

});

.accordion {
  width: 480px;
  border-bottom: 1px solid #c4c4c4;
}
.accordion h3 {
  background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
  font: bold 120%/100% Arial, Helvetica, sans-serif;
  padding: 7px 15px;
  margin: 0;
  border: 1px solid #c4c4c4;
  border-bottom: none;
  cursor: pointer;
}
.accordion h3:hover {
  background-color: #e2e2e2;
}
.accordion h3.active {
  background-position: right 5px;
}
.accordion p {
  background-color: #f7f7f7;
  margin: 0;
  padding: 10px 15px 20px;
  border-left: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
}
.accordion h3.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <h3 class='active'>Photos</h3>
  <p>Here are the photos of this person</p>
  <h3>About</h3>
  <p>About this person</p>
  <h3>Friends</h3>
  <p>Friends go here</p>
  <h3>Work Info</h3>
  <p>Work info goes here</p>
  <h3>Relationship Status</h3>
  <p>status goes here</p>
  <h3>Orientation</h3>
  <p>Orientation goes here</p>
</div>

View on JSFiddle

Answer 1

Cause of this line..

.next('p') and .siblings('p:visible') 

Your chain is already 2 levels deep, p elements and the second selection being p elements that are visible and you are toggling the class for these instead of h3

One approach is toggling the active class separately on the current h3

.slideUp('slow')
.end()
.siblings("h3").removeClass("active");
// Add active to the current class            
$(this).addClass('active');

Fiddle

You can also use end which ends the most recent filtering process. As you have selected the p elements twice already before the operation.

.slideUp('slow')
.end()
.end()
.toggleClass('active')
.siblings("h3").removeClass("active");

should also work.

Updated Fiddle