How to add an icon to an accordion menu-CodePudding

I've implemented an accordion that works fine, but I tried to add a to it to open the shutter and a - to close it when it is unfolded.

I could not find a way to do so.

Here is my code:

$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function() {
  if ($(this).next(".answer").is(":visible")) {
    $(this).next(".answer").slideUp(300);
  } else {
    $(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
  }
});

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
body {
  font-family: "Inter", sans-serif;
  padding: 20px;
}

.question {
  color: #555;
  padding: 15px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid #ccc;
  background: #efefef;
}

.question:hover {
  cursor: pointer;
}

.answer {
  color: #777;
  padding: 15px;
  font-weight: 400;
  font-size: 13px;
  border: 1px solid #ccc;
  border-top: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

<div id="faq_slide">
  <div >First Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Second Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Third Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
</div>

CodePudding user response：

You can add Span tag inside your question div and give it an absolute position and change its text content depending on your click event

Here is an example how to do that:

$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function() {
  if ($(this).next(".answer").is(":visible")) {
    $(this).next(".answer").slideUp(300);
    $(this).find('span').text(' ');
  } else {
    $(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
    // Add - when its open and   for other Siblings
    $(this).find('span').text('-'); 
    $(this).siblings().find('span').text(' ');
  }
});

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

body {
  font-family: "Inter", sans-serif;
  padding: 20px;
}

.question {
  color: #555;
  padding: 15px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid #ccc;
  background: #efefef;
  position: relative;
}

.question:hover {
  cursor: pointer;
}

.answer {
  color: #777;
  padding: 15px;
  font-weight: 400;
  font-size: 13px;
  border: 1px solid #ccc;
  border-top: none;
}

.symbol {
  position: absolute;
  /* Top Right Bottom Left */
  inset: auto 1rem auto auto;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

<div id="faq_slide">
  <div >First Question<span >-</span></div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Second Question<span > </span></div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Third Question.<span > </span></div>
  <div >Lorem ipsum dolor sit amet</div>
</div>

CodePudding user response：

you may add a toggle class 'active' for the element with class 'question' and add pseudo-element style :before content: " " not-active and "-" for active class

$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question:first-child").addClass('active');
$("#faq_slide .question").click(function() {
    $(this).siblings('.question').removeClass('active')
    $(this).toggleClass('active');
  if ($(this).next(".answer").is(":visible")) {
    $(this).next(".answer").slideUp(300);
  } else {
    $(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
  }
});

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
body {
  font-family: "Inter", sans-serif;
  padding: 20px;
}

.question {
  color: #555;
  padding: 15px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid #ccc;
  background: #efefef;
  position: relative;
}

.question:hover {
  cursor: pointer;
}

.answer {
  color: #777;
  padding: 15px;
  font-weight: 400;
  font-size: 13px;
  border: 1px solid #ccc;
  border-top: none;
}

.question::after{
  content: ' ';
  display:inline-block;
  width: 15px;
  height: 15px;
  position: absolute;
  right: 10px;
  transition: all 0.5s ease;
}

.question.active::after{
  content: '-';
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

<div id="faq_slide">
  <div >First Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Second Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Third Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
</div>