for each function jquery

Question

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

First one should work, what do you mean you cant get it working for every element on the page? Might need to post some markup. — Loktar
– Loktar, Commented Sep 7, 2011 at 15:26
In your toggle you are specifying the toggle on an ID, so only the element with that ID will open. — Jack
– Jack, Commented Sep 7, 2011 at 15:27
I don't see any element in your markup with the 'tog' class applied to it. — Gabe
– Gabe, Commented Sep 7, 2011 at 15:31

Platinum Azure · Accepted Answer · 2011-09-07 15:37:16Z

1

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.

edited Sep 7, 2011 at 15:37

answered Sep 7, 2011 at 15:29

Platinum Azure

46.4k13 gold badges112 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Platinum Azure Over a year ago

Also: Why doesn't the first version work? You need to post more information, because you can use .click on a jQuery object that encompasses multiple HTML elements.

Platinum Azure Over a year ago

@Martin B.: No, but the question title implied that he wanted to know how to use .each properly. I answered that and also mentioned that the .each shouldn't be needed. Please consider removing your downvote if you are the one who used it.

Jack Over a year ago

I don't think this is an issue with not understanding .each(). I think it's an issue with not understanding the basics of jQuery.

Platinum Azure Over a year ago

@Jack: Probably. I've been making a flurry of edits and now my answer should be useful.

Collectives™ on Stack Overflow

for each function jquery

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related