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

My piece of advice, the HTML structure kinda seems messy here. I would advise wrapping each of those modal things in a div, then applying "active" to the wrapper. Then you can style the children accordingly. — user3117575
– user3117575, Commented Aug 5, 2015 at 0:04

Sushanth -- · Accepted Answer · 2015-08-05 00:09:05Z

3

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

edited Aug 5, 2015 at 0:09

answered Aug 5, 2015 at 0:00

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS class specification in selector

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related