i have a toggle function which i have working fine, only i cant get it to work for each element on the page.
my current function is
$(".tog").click(function() {
$("#shortinfo").toggle();
$('#shortinfo').toggleClass('open');
return false;
})
ive tried
$(".tog").each.click(function() {
$("#shortinfo").toggle();
$('#shortinfo').toggleClass('open');
return false;
})
and
$(".tog").each (click(function() {
$("#shortinfo").toggle();
$('#shortinfo').toggleClass('open');
return false;
I have an accordion similar too
<h1>title </h1>
<div class="shortcontent">asdasdasd</div>
<div class="longcopy">long stuff here</div>
<h1>title </h1>
<div class="shortcontent">asdasdasd</div>
<div class="longcopy">long stuff here</div>
<h1>title </h1>
<div class="shortcontent">asdasdasd</div>
<div class="longcopy">long stuff here</div>
<h1>title </h1>
<div class="shortcontent">asdasdasd</div>
<div class="longcopy">long stuff here</div>
the idea is when its clicked ‘shortcontent’ dissapears. at the moment that is only happening on the first section
Now that the question has changed…
You’re using the wrong selector. First of all,
#shortinfois not the same as.shortcontent. Second, in order to make sure only the correct.shortcontentdisappears, you need to use.siblings().If the
.togelement is within each accordion…If there is one
.togelement and you want all.shortcontentto collapse…This should hopefully be enough to get you started.