Jazzy 1012
asked on
How to show span when clicked on?
This is my span, I want when I click on "Do I have to cook.." The other part shows
<span class="faqQABlock">
<span class="faq pointer inlineBlock OldStandard">
<p>Do I have to cook your food myself?</p>
</span>
<span class="faqA inlineBlock OpenSansLight">
<p> Nope! Our chefs have that part covered.</p>
</span>
</span>
Css:.faqBlock{
margin-bottom:2em;
}
.faqBlock>span{
margin-bottom: 40px;
}
.faqBlock h2{
padding-bottom: 5px;
border-bottom: 1px solid #cf5630;
margin: 0px auto 10px auto;
font-size: 1.33em;
}
.faqBlock .faq{
margin: 1em auto 1em auto;
display:flex;
flex-flow:column;
line-height: 1.2em;
font-size: 1.2em;
}
.faq p{
border-bottom: 1px solid rgba(123,26,29,0);
}
.faqBlock .faqA{
display:none;
transition: all 0.5s ease;
line-height: 1.2em;
max-width: 800px;
margin: 0px auto 1em 20px;
}
I have it on display none, but what javascript do I use that makes it show? Also I have more than one span but they all the this same class.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Wait sorry this is the complete css:
<div id="FAQQBlock">
<div id="Service" class="faqBlock">
<span>
<h2 class="OldStandard inlineBlock">What You Get When You Order from Epicured</h2>
<span class="faqQABlock">
<span class="faq pointer inlineBlock OldStandard">
<p>Do I have to cook your food myself?</p>
</span>
<span class="faqA inlineBlock OpenSansLight">
<p> Nope! Our chefs have that part covered.</p>
</span>
</span>
All the spans are in the div, so what should i do?
The javascript code creates and append the span and the classes that you have inside.
ASKER
Yes but I want something simply, I have over 30 spans, I dont want to do that for each one.
ASKER
@Julian Hansen I tried yours, I want something simply like it exactly but for some reason its not working, Is it fine that I have over 30 of the same spans
You said initially
This is my span, I want when I click on "Do I have to cook..". You didn't said that you need the function for a bunch of code...If you want something simply then follow the JQuery code that posted Julian.
ASKER
My apologies, I have but for some reason it isn't working and there is no errors on the console.
Put the following script inside the head. It's Jquery cdn and try to use the Julians code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
ASKER
.faqBlock .faqA.active{
display:block;
overflow-x:scroll;
}
How can I add this css for when it is displayed?
Open in new window
Then only with pure javascript code add the following :Open in new window