SlideToggle an Attribute Only Working for First Element with Class

user_9383445 0
Viewed 38

I am trying to create a dropdown accordion box that when clicked toggles between a "+" and a "-". I got this to work with one box. But I would like to have a box within a box. For some reason the "+" and "-" does not work for all the boxes only the first one. It will change to a "-" when clicked but does not change back to a "+" when clicked again. I am assuming I need some sort of each function but I cannot figure out where to put it.

You can see an example of this at https://codepen.io/rebeccagracedesigns/pen/GRrGvGK

This is the HTML

 <div class="dropdown">
  <h2 class="question">This is a question.</h2>
  <div class="drop-down-contents">
    <div class="dropdown">
      <h3 class="question">This is a question.</h3>
      <div class="drop-down-contents">
        <div class="dropdown">
          <h4 class="question">This is a question.</h4>
          <div class="drop-down-contents">
            <p>This is a paragraph.</p>
          </div>
        </div>
        <div class="dropdown">
          <h4 class="question">This is a question.</h4>
          <div class="drop-down-contents">
            <p>This is a paragraph.</p>
          </div>
        </div>
        <div class="dropdown">
          <h4 class="question">This is a question.</h4>
          <div class="drop-down-contents">
            <p>This is a paragraph.</p>

          </div>
        </div>
      </div>
    </div>
    <div class="dropdown">
      <h3 class="question">This is a question.</h3>
      <div class="drop-down-contents">
        <p>This is a paragraph.</p>
      </div>
    </div>
  </div>
</div>

This is the JQuery

$(".question").attr("dropdown-arrow", "+");
$(".question").click(function() {
  $(this)
    .nextUntil(".question")
    .slideToggle("slow", function () {
      if ($(".drop-down-contents").is(":visible")) {
        $(this).siblings(".question").attr("dropdown-arrow", "-");
      } else {
        $(".question").attr("dropdown-arrow", "+");
      }
    });
});
jquery javascript
1 Answers

Try below snippet

$(".question").attr("dropdown-arrow", "+");
$(".question").click(function() {
  $(this)
    .nextUntil(".question")
    .slideToggle("slow", function () {
      if ($(this).closest(".drop-down-contents").is(":visible")) {
        $(this).closest(".drop-down-contents").prev(".question").attr("dropdown-arrow", "-");
      } else {
        $(this).closest(".drop-down-contents").prev(".question").attr("dropdown-arrow", "+");
      }
    });
});
/* Dropdown Box */
.question {
  padding: 10px;
  outline: black solid 3px;
  outline-offset: 3px;
  margin: auto 0px;
  background: black;
  color: #FFFFFF;
  margin: 20px 0px;
  cursor: pointer;
}
.dropdown h2{
 font-size: 1.5rem; /*question font size */
}

.dropdown h3{
 font-size: 1.3rem; /*question font size */
}

.dropdown h4{
 font-size: 1rem; /*question font size */
}

.drop-down-contents {
display:none;
padding-left: 2vw; /*space between line and answer */
}

.question:after{
content: attr(dropdown-arrow);
text-align:right;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <h2 class="question">This is a question.</h2>
  <div class="drop-down-contents">
    <div class="dropdown">
      <h3 class="question">This is a question.</h3>
      <div class="drop-down-contents">
        <div class="dropdown">
          <h4 class="question">This is a question.</h4>
          <div class="drop-down-contents">
            <p>This is a paragraph.</p>
          </div>
        </div>
        <div class="dropdown">
          <h4 class="question">This is a question.</h4>
          <div class="drop-down-contents">
            <p>This is a paragraph.</p>
          </div>
        </div>
        <div class="dropdown">
          <h4 class="question">This is a question.</h4>
          <div class="drop-down-contents">
            <p>This is a paragraph.</p>

          </div>
        </div>
      </div>
    </div>
    <div class="dropdown">
      <h3 class="question">This is a question.</h3>
      <div class="drop-down-contents">
        <p>This is a paragraph.</p>
      </div>
    </div>
  </div>
</div>

user_64696450
Related