CODEWITHSUNDEEP
javascriptjquery
alice practice
alice practice

Reputation: 13

for each function jquery

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

Upvotes: 0

Views: 123

Answers (1)

Platinum Azure
Platinum Azure

Reputation: 46183

Now that the question has changed...

You're using the wrong selector. First of all, #shortinfo is not the same as .shortcontent. Second, in order to make sure only the correct .shortcontent disappears, you need to use .siblings().

If the .tog element is within each accordion...

$(".tog").click(function() {
                var $shortContent = $(this).siblings(".shortcontent");
                $shortContent.toggle();
                $shortContent.toggleClass('open');
                return false;
            });

If there is one .tog element and you want all .shortcontent to collapse...

$(".tog").click(function() {
                var $shortContent = $(".shortcontent");
                $shortContent.toggle();
                $shortContent.toggleClass('open');
                return false;
            });

This should hopefully be enough to get you started.

Upvotes: 1

Related Questions