Hello everyone, I'm new to this platform and excited to share my first post.
Currently, I find myself facing a major challenge as I navigate through a bootcamp program. I have been working on a website with different sections that require specific functionalities.
const bookmarkButton = document.querySelectorAll('.pictureBook')
bookmarkButton.forEach(function (setIt) {
setIt.addEventListener('click', () => {
setIt.classList.toggle('bookmarkChecked')
})
}).pictureBook {
all: unset;
background-image: url(/img/bookmark-svgrepo-com.svg);
background-size: cover;
width: 100px;
height: 100px;
position: absolute;
top: -15px;
right: -10px;
cursor: pointer;
opacity: 0.5;
}
.bookmarkChecked {
opacity: 1;
} <section class="main__section">
<h2 class="question__title">Question</h2>
<p class="question__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eius
voluptatibus modi voluptates nisi quam expedita fugiat repudiandae
animi ab.
</p>
<button class="pictureBook"></button>
<button class="showanswer__btn">Show Answer</button>
<p class="answershowed hideanswer">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A nemo
libero tempore dolore numquam dolorum sed cumque nihil explicabo
ullam.
</p>
</section>By clicking the bookmark icon, the opacity changes to 100% indicating it has been marked (displayed in black).
I have implemented a button and would like it to only reveal the classes that have been bookmarked. I have reached a roadblock in my research and hope for assistance from this community.
Additionally, when another button in the footer is clicked, the site should display only the active sections with the class "bookmarkChecked" visible.
Your help would be greatly appreciated. Thank you!