Faq_Accordion_Main

Community feedback

• 

  P

  Jax Teller•670

  @piushbhandariPosted 11 months ago

  i had a rough look at your JS and styles.

  make sure to:

  1. display:none; to your .accordion-text element to hide it when the accordion is not opened.
  2. in your JS, the class that's being added to the accordion button isn't doing anything. when checking if the element has .title__click, add .title__click to the button AND to the .accordion-text. in your css make sure to have this .title__click{display: block;} this is so that when the class gets added to both elements you'll be showing the .accordion-text element too. then when you click again you can use JS to remove .title__click

  BTW:

  • you can remove the input:checkbox and label. convert the label to a button instead, so <label for="section1" class="accordion__label title__click" id="title"> will be <button type="button" class="accordion__label title__click" id="title">
  • instead of having the svg +/- icons as an :after element, just put them into their own <img/> element instead inside the <button> element when you convert it from your label. use css to hide the - icon. when you attach the .title__click class to your button element use css to show the - icon and hide the + icon. then do the opposite when the .title__click class gets removed. right now when i click on your accordion buttons the + disappears and no - icon.
  • for you background image pattern, you can leave the alt attribute as alt="" since this is for decorative purposes only. i would also set the image to be width: 100%; so that when you zoom out your layout doesn't look cropped out

  hope this helps

  Marked as helpful

  0

  ---

  

  P

  Glenda Joyce Reed•1,260

  @Glenda9031Posted 11 months ago

  @piushbhandari Thank you so much!

  0