Get class to use in a function (jQuery)

Question

Question Edited:

So, probably i didn't asked the question in the best way:

With X being the class name from the divs:

function functionName(X) {
        $('h2.X').click(function(){
    $(this).parent().find('div.X').slideToggle("slow");
});

    <h2 class="divName" onclick="functionName(X)">Title</h2>
    <div class="divName">
    <p> description </p>
    </div>

    <h2 class="divName2" onclick="functionName(X)">Title</h2>
    <div class="divName2">
    <p> description </p>
    </div>

Well, for those who don't understand, just don't downvote. Thanks a lot :/

Let's put it this way:

 $('h2.divName').click(function(){
        $(this).parent().find('div.divName').slideToggle("slow");
 });

        <h2 class="divName">Title</h2>
        <div class="divName">
        <p> description </p>
        </div>


        <h2 class="divName2">Title</h2>
        <div class="divName2">
        <p> description </p>
        </div>

        <h2 class="divName3">Title</h2>
        <div class="divName3">
        <p> description </p>
        </div>

I want to replicate the accordeon to function with all the divs...

possible duplicate of [How to use javascript variables in jquery selectors](http://stackoverflow.com/questions/5891840/how-to-use-javascript-variables-in-jquery-selectors) — Felix Kling, Mar 04 '12 at 23:38
Downvotes on your question indicate that you should put more effort in your question and clarify it. Don't just tell people to read it more carefully. It is on you to provide the information in an understandable way. — Felix Kling, Mar 04 '12 at 23:41
@James South no worries, if someone explains the solution like you, they deserve the "up vote" and be selected as the "right answer" — Souza, Mar 05 '12 at 00:30

score 2 · Accepted Answer · answered Mar 04 '12 at 23:49

I suggest you have a good read of the documentation for jQuery as I think you are missing the point.

Given the following markup:

<h2 class="accTrigger">Title</h2>
<div class="accTarget">
    <p> description </p>
</div>
<h2 class="accTrigger">Title</h2>
<div class="accTarget">
    <p> description </p>
</div>

You could write something like this:

$("h2.accTrigger").click(function(event){
    $(this).next("div.accTarget").slideToggle();
});

What you are doing here is creating an event handler for all h2 elements that trigger the visibility of the next div.

This would allow you to do what you want whilst keeping Javascript out of your page which is very much what you should strive to do.

The recommended way to do this now though would be to use event delegation and reduce the number of event handlers and therefore memory usage.

Rewriting your markup as follows:

<div class="accordion">
    <h2>Title</h2>
    <div>
        <p> description </p>
    </div>
    <h2>Title</h2>
    <div>
        <p> description </p>
   </div>
</div>

Will allow you to write code like this:

$("div.accordion").on("click", "h2", function(event){
    $(this).next("div").slideToggle();
});

Which is really simple to write. What's going on here is that jQuery is creating only one eventHandler per each instance of a div with the class accordion on the page.

That eventHandler is listening for any click events bubbling up from its children and if one of them is a h2 element then it will pass the context of that function to that element and toggle the visibility of that next div.

It's really important to try to understand what you are doing when you are writing Javascript and really learn the basics. Javascript is the most important language in the web and should be treated as a first class language.

I was just about to write something similar. +1 Looks like the OP is lost in simplicity. — Roko C. Buljan, Mar 04 '12 at 23:53

score 1 · Answer 2 · edited Mar 04 '12 at 23:59

1

Is this what you are looking for

function acc(el){
   $('.'+el).slideToggle();
}

        <h2 class="hName" onclick="acc('d1');">Title1</h2>
        <div class="divName d1">
          <p> description1 </p>
        </div>

        <h2 class="hName" onclick="acc('d2');">Title2</h2>
        <div class="divName d2">
          <p> description2 </p>
        </div>

        <h2 class="hName" onclick="acc('d3');">Title3</h2>
        <div class="divName d3">
          <p> description3 </p>
        </div>

demo jsBin

edited Mar 04 '12 at 23:59

Roko C. Buljan

196,159
39
305
313

answered Mar 04 '12 at 23:25

Jaspreet Chahal

2,759
1
15
17

That was my first thought when I read the question but I think the OP really should be told a better practice process rather than just a quick and dirty method. – James South Mar 04 '12 at 23:51
sure, it has no sense at all. (@Jaspreet I fixed the non-working code. Feel free no that works to redo the changes.) – Roko C. Buljan Mar 05 '12 at 00:00
thnx @roxon the original question didn't make any sense. I though asker was just asking how to generalize his code. Revisited this question after 8 hours to see the answer fixed. Thanks once again :) Cheers! – Jaspreet Chahal Mar 05 '12 at 08:34

score 0 · Answer 3 · answered Mar 04 '12 at 23:26

0

Rather than use div-class, you can pass this and capture it as $(this) to get a reference to the calling object referred to by the this in the first place. Try passing this and seeing what you get in the console.log

answered Mar 04 '12 at 23:26

MyStream

2,533
1
16
33

Get class to use in a function (jQuery)

3 Answers3