reusable code

First let me say i'm new to javascript & jquery. (almost no experience with them)
I'm trying to make this code easier to re-use. I'm making boxes with 3 dots on the top right. When clicked, it opens drops a drawer open. Now this could have dozens of these handle/drawers on each page so it's getting a bit tedious. Here's what I mean:

I'm wondering how/if I can reuse this code easily.

<script>
    $(document).ready(function(){
      $("#handle-[UNIQUE]").click(function(){
        $("#drawer-[UNIQUE]").slideToggle(200);
      });
    });
</script>

Code (JavaScript):

so that it can be re-used with as many boxes as I want without re-writing it.

Here's the full example of my code:

<script>
    $(document).ready(function(){
      $("#handle-[UNIQUE]").click(function(){
        $("#drawer-[UNIQUE]").slideToggle(200);
      });
    });
</script>
<div class="box">
    <div class="title titleGrid">
        <div>Title</div>
        <div class="dots" id="handle-[UNIQUE]"></div>
    </div>
    <div class="content" id="drawer-[UNIQUE]"><p>Content</p></div>
    <div class="bfooter"></div>
</div>

Code (JavaScript):

TIA for any help!

 

Just put it in a function and call the function whenever you need it.

 

erm, I'm new to js & jquery. I've only started copy/paste from help/example sites & modify to my needs. Can you show an example of what you mean? TY.

 

I do not use trainwrecks like jQueery, so cannot answer your question. Also I know very little about javascript, so really cannot help you there either.

However, if this were FoxPro, I could have an example up immediately.

In fact here is a simplistic example in FoxPro

FUNCTION MULT
PARAMETERS qNum, qMult
z = qNum * qMult
RETURN z

? MULT(2, 3)
? MULT(3, 4)
? MULT(4, 8)

That prints out 6, 12, and 32.

 

In case anyone cares I got it working with some trial and error. This appears to work fine:

<script>
    $(document).ready(function(){
      $(".dots").click(function(){
          var theid = $(this).attr("handle");
        $("#drawer-" + theid).slideToggle(200);
      });
    });
</script>


<div class="box">
    <div class="title titleGrid">
        <div>TEST</div>
        <div class="dots" handle="02"></div>
    </div>
    <div class="content" id="drawer-02">
        <p>test</p>
    </div>

    <div class="bfooter"></div>
</div>

<div class="box">
    <div class="title titleGrid">
        <div>TEST</div>
        <div class="dots" handle="03"></div>
    </div>
    <div class="content" id="drawer-03">
        <p>test</p>
    </div>

    <div class="bfooter"></div>
</div>

Code (JavaScript):

 

After more playing around I learned some more jquery!
Here's my improved, & I think final, code:

 <script>
  $(document).ready(function(){
    $("[handle]").click(function(){
      var theid = $(this).attr("handle");
      $("[drawer='" + theid + "']").slideToggle(200);
    });
  });
</script>

Code (JavaScript):

Then I can make as many boxes as I want like this:

<div class="box">
    <div class="title titleGrid">
        <div>TEST</div>
        <div class="dots" handle="UNIQUE"></div>
    </div>
    <div class="content" drawer="UNIQUE">
        <p>test</p>
    </div>

    <div class="bfooter"></div>
</div>

Code (JavaScript):

Now I can make anything a handle & anything a drawer! I didn't know about $("[whatever]") selector. Cool

 

I honestly don't know what's the worst in that. The mental midgetry that is jQuery, the use of JavaScript to possibly do something that's none of JavaScript's business (I'd have to see it live in a page), the use of a non-keyboard navigable DIV doing either <button> or <input>'s job, the div > div doing a numbered heading's job, the endless pointless classes for nothing, <div> doing <footer>'s job, or the fact you're just randomly making up your own fairy-tale BS attributes that are in no way valid HTML.

Andraste's tits what a shit-show.

Hell, given what it's doing, this might not even need JavaScript or CSS thanks to details/summary.