How to make the image clickable?
I'm currently learning JavaScript on scrimba, and I use chatGPT, didn't work well.
HTML: <div class="questions">
<div class="question1">
<span> What is Frontend Mentor, and how will it help me?</span>
<img src="icon-plus.svg" alt="Expand">
<img src="icon-minus.svg" class="hidden">
</div>
<div class="answer1 hidden" > <p> Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for portfolio building.</p> </div> <div class="question2"> <span> Is Frontend Mentor free?</span> <img src="icon-plus.svg" alt="Expand"> <img src="icon-minus.svg" class="hidden"> </div> <div class="answer2 hidden"> <p>Yes, Frontend Mentor offers both free and premium coding challenges, with the free option providing access to a range of projects suitable for all skill levels.</p> </div> <div class="question3"> <span>Can I use Frontend Mentor projects in my portfolio?</span> <img src="icon-plus.svg" alt="Expand"> <img src="icon-minus.svg" class="hidden"> </div> <div class="answer3 hidden"> <p>Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers!</p> </div>
<div class="answer1 hidden" > <p> Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for portfolio building.</p> </div> <div class="question2"> <span> Is Frontend Mentor free?</span> <img src="icon-plus.svg" alt="Expand"> <img src="icon-minus.svg" class="hidden"> </div> <div class="answer2 hidden"> <p>Yes, Frontend Mentor offers both free and premium coding challenges, with the free option providing access to a range of projects suitable for all skill levels.</p> </div> <div class="question3"> <span>Can I use Frontend Mentor projects in my portfolio?</span> <img src="icon-plus.svg" alt="Expand"> <img src="icon-minus.svg" class="hidden"> </div> <div class="answer3 hidden"> <p>Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers!</p> </div>
10 Replies
<div class="question4">
<span>How can I get help if I'm stuck on a Frontend Mentor challenge?</span>
<img src="icon-plus.svg" alt="Expand">
<img src="icon-minus.svg" class="hidden">
</div>
<div class="answer4 hidden">
<p>The best place to get help is inside Frontend Mentor's Discord community. There's a help
channel where you can ask questions and seek support from other community members.</p>
</div>
</div>
CSS: .hidden{
display:none;
}
.questions img{
cursor: pointer;
JavaScript: const plusImg = document.querySelectorAll("questions");
const response = document.querySelectorAll("hidden");
plusImg.addEventListener("click", function() {
response.classList.toggle("hidden");
})
Trying to make the image clickable to show the response.
There are few ways to do that.
The easiest way is to create a on click (on the image) toggle class and than use the css properties to show or hide the content. Be sure to use eventListener method.
Just toggle class "show" to class .hidden, the rest is CSS decalaring
.hidden{display:none;}
.hidden.show{display:block}
Also I suggest to put the answer in the same div with the question.
MDN Web Docs
: The Details disclosure element - HTML: HyperText Markup Language ...
The HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the element.
Then style with css
I realize this is not what you asked but I can't help myself sometimes to show how nice semantic html has gotten.
haha yea me too, even made a small demo out of it
https://codepen.io/MarkBoots/pen/ExMozxG
Wow, thanks everyone!
I was about to go bald of doing JS.
i did add a bit of js to my pen, in case you want to auto close a question when another one is opened
ah, okay. Thanks
I'm going to make sure to learn from it.
no problem, good luck with your progress!