Member Avatar for piers

Hi,

I am trying to create toggle buttons for a page with profiles in. I have around 60 buttons on the page and want to try not to define the click function 60 times:

$(document).ready(function(){

  $(".button1").click(function(){
    $(".1").toggle();

    });
  $(".button2").click(function(){
    $(".2").toggle();
  });
  $(".button3").click(function(){
    $(".3").toggle();
  });

   $("p").css({display: "none"});
});

So I was trying to do a for each loop with JQuery so that I would only have to declare it once for all the buttons but I can't get it to work (please note JQuery is stored on the server and so I do not need to reference the google libraries within the code I am displaying and I have got the buttons above to work fine).

So below is the code that I am trying to do this with but I am not sure how to use the .each(function() which I saw on the JQuery website with what I am trying to do below:

<script type="text/javascript">

for each (i = 1; i < i.length; i++;) 
{
$(".button[i]").click(function(){
    for each(j = 1; j < j.length; j++;) 
    {
    $(".[j]").toggle();
    });
}
</script>
<div>
<button style="position: relative; float: right; top: -45px;" class="button1">Show more/hide</button>
<p class="1">
my text here
</p>
</div>

<div>
<button style="position: relative; float: right; top: -45px;" class="button2">Show more/hide</button>
<p class="2">
my text here
</p>
</div>

Any help on this would be appreciated.

  • 3 Contributors
  • 4 Replies
  • 1K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by piers
Member Avatar for stbuchok

This looks like it is to show and hide section of a page. If so look at the following (completely untested, just going by memory of what I've done in the past):

$(function(){
    $('#wrapper').on('click, '[data-showhideid]', function(){
        $('#' + $(this).attr('data-showhideid')).toggle();
    });
};

...

<div id="wrapper">
    <button data-showhideid="div1">Show/Hide Div1</button>
    <div id="div1">Div1 showing</div>

    <button data-showhideid="div2">Show/Hide Div2</button>
    <div id="div2">Div2 showing</div>

    <button data-showhideid="div3">Show/Hide Div3</button>
    <div id="div3">Div3 showing</div>

    <button data-showhideid="div4">Show/Hide Div4</button>
    <div id="div4">Div4 showing</div>
</div>

Hope it helps. If you need an explanation, let me know.

commented: Nice usage of the data attribute! +5
Member Avatar for EvolutionFallen

I agree with using .on() instead of .each(). Just a note, data- attributes are HTML5, so if you are writing your page in XHTML for some reason, it will be invalid markup.

Member Avatar for piers

Hi stbuchok,

Your memory is good :-) I had to make a slight tweek to what you gave me to get it to work.
This is going to be very useful for me, thank you for your help.

Something which I am not fully understanding though is the data-showhideid. It looks like defining an array in the JQuery code but what is it in the context of the HTML? It looks to me like each of the data-showhideid ="div1" is like array[0] = "div1"; array[1]="div2"; etc but I am not sure.

I am going to post the code which I have got to work based on your previous post so that people can use it in future as I think it is quite handy.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <script src="jquery-1.7.2.js"></script>

</head>



<body>
<div id="wrapper">
    <button data-showhideid="div1">Show/Hide Div1</button>
    <div id="div1">Div1 showing</div>
    <button data-showhideid="div2">Show/Hide Div2</button>
    <div id="div2">Div2 showing</div>
    <button data-showhideid="div3">Show/Hide Div3</button>
    <div id="div3">Div3 showing</div>
    <button data-showhideid="div4">Show/Hide Div4</button>
    <div id="div4">Div4 showing</div>
    </div>

    <script type="text/javascript">
 $(function(){
    $('#wrapper').on('click', 
    '[data-showhideid]', function(){
    $('#' + $(this).attr('data-showhideid')).toggle();
    });
    });
</script>    
    </body>
</html>

Now you don't have to have the scripting in the body, I do it like that because of specific needs at work, but it can easily be done in the head tag.

Member Avatar for piers

Hi,

I just read EvolutionFallen's post and looked into the data-attribute a bit more to understand it. It is really handy. So I am setting this to resolved. Thanks both of you :-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.