jQuery addClass to all img
Hi.
I'm having some issue on FAQ page. The basic FAQ is the dropdown image doesn't have any class or id.
We want when user click the question it toggle open and i'm using jQuery to add some class on the image.
But the issue is it add the class on all the image question, not only current toggle question.
How can i achieve this? Can someone guide me.
Here is the script that i'm working for.
- {source}
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("a").click(function(){
jQuery("img").addClass("rotate");
});
});
</script>
<p>
</p>
<div class="title">
<p>
About Organic Pasta
</p>
</div>
<div class="faqs">
<ul class="qa_list" id="accordion1">
<li class="panel">
<div class="quest">
<a id="dropdown_toggle" data-toggle="collapse" data-parent="#accordion1" href="#firstLink">
<p class="no">
<span class="inner">Q</span>
</p>
<p class="text">
<span class="inner">
What are the characteristics of organic pasta from Alce Nero?
</span>
<span class="outer">
<img src="images/AN-Icons/arrow-down-sign-to-navigate.png" alt="arrow-down-sign-to-navigate" width="10" height="10" />
</span>
</p>
</a>
</div>
<div id="firstLink" class="collapse">
<p class="no">
<span class="inner">A</span>
</p>
<p class="text">
<span class="inner">
It is 100% organic Italian wheat grown in Italy with 100% raw material used. Milling and manufacturing so as not to destroy the tissue of the wheat makes the flavor and nutritional value of wheat live pasta.
</span>
</p>
</div>
</li>
<li class="panel">
<div class="quest">
<a id="dropdown_toggle" data-toggle="collapse" data-parent="#accordion1" href="#secondLink">
<p class="no">
<span class="inner">Q</span>
</p>
<p class="text">
<span class="inner">
A small hole in the bag of pasta is open, is there any problem?
</span>
<span class="outer">
<img src="images/AN-Icons/arrow-down-sign-to-navigate.png" alt="arrow-down-sign-to-navigate" width="10" height="10" />
</span>
</p>
</a>
</div>
<div id="secondLink" class="collapse">
<p class="no">
<span class="inner">A</span>
</p>
<p class="text">
<span class="inner">
This is an air vent hole drilled to prevent the bag from bursting, so there is no problem. It also has better ventilation and always has the advantage that the environment inside the bag can be kept constant.
</span>
</p>
</div>
</li>
<li class="panel">
<div class="quest">
<a data-toggle="collapse" data-parent="#accordion1" href="#threeLink">
<p class="no">
<span class="inner">Q</span>
</p>
<p class="text">
<span class="inner">
What is al dente?
</span>
<span class="outer">
<img src="images/AN-Icons/arrow-down-sign-to-navigate.png" alt="arrow-down-sign-to-navigate" width="10" height="10" />
</span>
</p>
</a>
</div>
<div id="threeLink" class="collapse">
<p class="no">
<span class="inner">A</span>
</p>
<p class="text">
<span class="inner">
In pasta and rice, in Italy it is generally preferred to have a firm texture such that a slight core remains in the center when you eat it. Al dente is such a crisp texture.
</span>
</p>
</div>
</li>
</ul>
</div>
<p>
</p>
<div class="title">
<p>
About Organic Olive Oil
</p>
</div>
<div class="faqs">
<ul class="qa_list" id="accordion2">
<li class="panel">
<div class="quest">
<a data-toggle="collapse" data-parent="#accordion2" href="#fourLink">
<p class="no">
<span class="inner">Q</span>
</p>
<p class="text">
<span class="inner">
What is the character of Organic Olive Oil from Alce Nero?
</span>
<span class="outer">
<img src="images/AN-Icons/arrow-down-sign-to-navigate.png" alt="arrow-down-sign-to-navigate" width="10" height="10" />
</span>
</p>
</a>
</div>
<div id="fourLink" class="collapse">
<p class="no">
<span class="inner">A</span>
</p>
<p class="text">
<span class="inner">
Harvest hand picked olives grown in southern Italy carefully. It is the most squeezed olive oil squeezed carefully with cold press (less than 27 degrees) within 24 hours after harvest.
</span>
</p>
</div>
</li>
<li class="panel">
<div class="quest">
<a data-toggle="collapse" data-parent="#accordion2" href="#fifthLink">
<p class="no">
<span class="inner">Q</span>
</p>
<p class="text">
<span class="inner">
What is cold press?
</span>
<span class="outer">
<img src="images/AN-Icons/arrow-down-sign-to-navigate.png" alt="arrow-down-sign-to-navigate" width="10" height="10" />
</span>
</p>
</a>
</div>
<div id="fifthLink" class="collapse">
<p class="no">
<span class="inner">A</span>
</p>
<p class="text">
<span class="inner">
If the temperature is adjusted at 27 degrees Celcius or less in the process of oil extraction, you can sing a cold press. Although it is easier to press oil when heated, the flavor and aroma of the oil will be impaired. Olive oil oiled with cold press is laborious and produces rich flavor instead of less yield.
</span>
</p>
</div>
</li>
</ul>
</div>
<p>
</p>
<div class="title">
<p>
About Organic Apple Cider
</p>
</div>
<div class="faqs">
<ul class="qa_list" id="accordion3">
<li class="panel">
<div class="quest">
<a data-toggle="collapse" data-parent="#accordion3" href="#sixthLink">
<p class="no">
<span class="inner">Q</span>
</p>
<p class="text">
<span class="inner">
I feel that the color is different from usual, why is this? There is a floating item, is it okay?
</span>
<span class="outer">
<img src="images/AN-Icons/arrow-down-sign-to-navigate.png" alt="arrow-down-sign-to-navigate" width="10" height="10" />
</span>
</p>
</a>
</div>
<div id="sixthLink" class="collapse">
<p class="no sixth">
<span class="inner">A</span>
</p>
<p class="text">
<span class="inner">
This Apple vinengar is an organic product, it does not sterilize the vinegar itself, it does not contain sulfur dioxide (In the filling process line the steam sterilization of the bottle is done). This is to make the most of the efficacy and benefits of acetic acid bacteria becomes active, vinegar fermentation progresses, the color may become darker. However, the quality of the product will not change as the activity of acetic acid bacteria becomes active. Although sometimes suspended sediments may be seen, this is also derived from acetic acid bacteria, which does not affect quality.
</span>
</p>
</div>
</li>
<li class="panel">
<div class="quest">
<a data-toggle="collapse" data-parent="#accordion3" href="#seventhLink">
<p class="no">
<span class="inner">Q</span>
</p>
<p class="text">
<span class="inner">
Is Alce Nero Organic Apple Cider Halal?
</span>
<span class="outer">
<img src="images/AN-Icons/arrow-down-sign-to-navigate.png" alt="arrow-down-sign-to-navigate" width="10" height="10" />
</span>
</p>
</a>
</div>
<div id="seventhLink" class="collapse">
<p class="no">
<span class="inner">A</span>
</p>
<p class="text">
<span class="inner">
Yes, Alce Nero Organic Apple Cider is certified Halal by the Halal Food Council of Europe.
</span>
</p>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="row">
<div class="column">
<p class="faq_link">Need more information. Drop us a message <a href="/contact-us.html">here</a>.</p>
</div>
</div>
{/source}
Thanks in advance.