Toggle functions in one function

Question

I have this code :

$(document).ready(function(){
       $('#ShowUser').click(function(){
           $('.DivUser').toggle("fast");
        });
 });

 $(document).ready(function(){
       $('#ShowImage').click(function(){
           $('.DivImage').toggle("fast");
        });
 });

$(document).ready(function(){
       $('#ShowProfile').click(function(){
           $('.DivProfile').toggle("fast");
        });
 });


<label id="ShowUser">
<div class="ShowUser">

<label id="ShowImage">
<div class="ShowImage">

<label id="ShowProfile">
<div class="ShowProfile">

I want to put only in one function ,but javascript is not my strong side :) can someone help :)

<label id="Show1"/> <div class="Div1" style="display:block"> — Svetoslav Angelov
– Svetoslav Angelov, Commented Apr 23, 2014 at 6:28
Can you show us your HTML? There's might be a more efficient way to do that. — Cerbrus
– Cerbrus, Commented Apr 23, 2014 at 6:31

Felix · Accepted Answer · 2014-04-23 06:32:18Z

4

You can use:

$(document).ready(function () {
    $('[id^="Show"]').click(function () {
        var id = this.id.match(/\d+$/);
        $('.Div' + id).toggle("fast");
    });
});

Fiddle Demo

answered Apr 23, 2014 at 6:32

Felix

38.2k8 gold badges45 silver badges56 bronze badges

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

2 Comments

Svetoslav Angelov Over a year ago

it work pretty good ,but if i have something like this : <div id="ShowUser">Show1</div> <div id="ShowImage">Show2</div> <div class="DivUser">Show1</div> <div class="DivImage">Show2</div>

Svetoslav Angelov Over a year ago

Felix you are genius :)

Collectives™ on Stack Overflow

Toggle functions in one function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related