
Solution retrospective
I couldn't get the hide/show JavaScript to work for me. If someone could please offer any suggestions or advice? Happy Coding!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @piushbhandari
i had a rough look at your JS and styles.
make sure to:
display:none;
to your .accordion-text element to hide it when the accordion is not opened.- 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 bewidth: 100%;
so that when you zoom out your layout doesn't look cropped out
hope this helps
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord