Using javascript on multiple Div Id's

Question

I have created an expanding div that hides on load and expands when clicked using javascript and jQuery. My problem is that I need to use this feature multiple times on each page (10-30x). Is there a way to call the function to work with multiple Div ids using an array or something of that nature (I am a newbie, my apologies), e.g. a few of my div ids would be eb1, eb2, eb3, eb4. and here is my script that currently works on one id:

   <script type="text/javascript">
        jQuery(document).ready(function() {


        jQuery('#eb1').hide();
        //hides box at the begining
        jQuery("#hide").click(function() {
            jQuery('#eb1').fadeOut(300);
            //jQuery('#the_box').hide();
        });
        jQuery("#show").click(function() {
            jQuery('#eb1').fadeIn(300);
            //jQuery('#the_box').show();
        });

    });
</script>

Any help would be appreciated, even a link to an explanation. Thanks, Travis

Community · Accepted Answer · 2017-05-23 12:03:19Z

2

Further to John Conde's answer this is also possible using attribute-starts-with:

jQuery('div[id^="eb"]').hide();

JS Fiddle demo.

It is, of course, easier to just use a particular class-name, and the selector then becomes:

jQuery('.className').hide();

JS Fiddle demo.

References:

Attribute-starts-with ([attribute^="value"]) selector.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Sep 19, 2012 at 15:56

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

Comments

John Conde · Accepted Answer · 2012-09-19 15:55:57Z

1

You should be able to do this by separating the ids with a comma:

jQuery('#eb1','#eb2','#eb3').hide();

answered Sep 19, 2012 at 15:55

John Conde

220k100 gold badges464 silver badges504 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:27:16Z

0

just type "jquery multiple div show hide" into google:

the first link gives this: Show/Hide Multiple Divs with Jquery

:)

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Sep 19, 2012 at 15:58

Walty Yeung

3,61236 silver badges33 bronze badges

Comments

Pierre Henry · Accepted Answer · 2012-09-19 16:03:05Z

0

Maybe it is cleaner to add a css class to all the div (or whatever tag you use) elements that should behave like that, then use that class in the selector ?

        jQuery('div.hidable').hide();
        //hides all 'hidable' boxes
        jQuery("#hide").click(function() {
            jQuery('div.hidable').fadeOut(300);
        });
etc...

answered Sep 19, 2012 at 16:03

Pierre Henry

17.6k23 gold badges90 silver badges109 bronze badges

Comments

Full-Stack Software Engineer · Accepted Answer · 2012-09-19 16:03:14Z

0

You could create a function to do that.

let me explain

function ToogleDiv(container){

// simple toogle
$(container).toggle();

// a toogle with some effect
$(container).toggle('slow', function() {
 // add some action    }); }

here's is a Jquery example Toogle Jquery Example

Hope this helps.

answered Sep 19, 2012 at 16:03

Full-Stack Software Engineer

1,2482 gold badges10 silver badges10 bronze badges

Comments

Ivan Dyachenko · Accepted Answer · 2012-09-19 16:04:23Z

0

You can use Attribute Starts With Selector [name^="value"]

var divs = $('div[id^="eb"]');
$(divs).hide();

$('#show').click(function(){
    $(divs).show();
});

$('#hide').click(function(){
    $(divs).hide();
});

Live example on JSFiddle

answered Sep 19, 2012 at 16:04

Ivan Dyachenko

1,3489 silver badges16 bronze badges

Comments

Sebastian Breit · Accepted Answer · 2012-09-19 16:04:42Z

0

function show(var id){
     jQuery(id).fadeIn(300);
}

function hide(var id){
     jQuery(id).fadeOut(300);
}

and then, in your divs:

<a id="hide" onClick="hide('eb1')">hide</a>
<a id="show" onClick="show('eb1')">show</a>
<div id="eb1"></div>

answered Sep 19, 2012 at 16:04

Sebastian Breit

6,1611 gold badge37 silver badges54 bronze badges

Collectives™ on Stack Overflow

Using javascript on multiple Div Id's

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related