In jQuery how do I write a dynamic function to show and hide multiple divs that have distinct IDs?

Question

I know this question is redundant, yet I really require expert advice:

I am using jQuery the wrong way in the following scenario and would appreciate as many suggestions as possible to produce the most efficient code:

I have a webpage with with a parent div with ID = "#bottomrightbox". This parent "#bottomrightbox" div contains a series of divs with IDs such as "#20111", "#20112", "#20113"....

Currently I have assigned a link (i.e with id #link20111) for each of these divs (i.e. div with id #20111) that when clicked hides the children of #bottomrightbox div and shows the specific div. So my code as seen below simple responds to the onclick function of each link and then hides all the divs within the parent div and shows the specific div that is assigned to it by name. My problem is I have more than 40 divs with specific links that follow this type of naming sequence and so I have repetitive lines of jQuery code that should be reduced to a single function that takes cares of this process. I would appreciate if anyone could show me a simple way to write a jQuery function that allows for me to show each div when the link that is assigned to it is clicked.

My code works the following way:

link with id #link20111 -> click -> hide children of #bottomrightbox -> show div with id #20111

link with id #link20112 -> click -> hide children of #bottomrightbox -> show div with id #20112

link with id #link20113 -> click -> hide children of #bottomrightbox -> show div with id #20113

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

$('#link20111').click(function () {
$('#bottomrightbox').children().hide();
$('#20111').fadeIn(500);

});

$('#link20112').click(function () {
$('#bottomrightbox').children().hide();
$('#20112').fadeIn(500);

});

$('#link20113').click(function () {
$('#bottomrightbox').children().hide();
$('#20113').fadeIn(500);

});

});
</script>

All help is deeply appreciated.

Here is the sample/jsfiddle for this code: http://jsfiddle.net/uhnxj/

Please consider to add some HTML as example or a jsfiddle with the iteration that you are trying to achieve — Rui Carneiro, Apr 21 '12 at 03:33
For starters, ids cannot start with numbers. You should fix that first and foremost. — SenorAmor, Apr 21 '12 at 03:35
For help determining what you can use for IDs please see [What are valid values for the id attribute in HTML?](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — Erik Philips, Apr 21 '12 at 03:39

Lie Ryan · Answer 1 · 2012-04-21T04:01:26.300

You might want to use regular expression selector. So for example, your code might look like this:

$(':regex(id,link)').click(function() {
    var link_id = $(this).attr('id');
    var id = link_id.replace(/^link/, '');
    $('#bottomrightbox').children().hide();
    $('#' + id).fadeIn(500);
});

see the following jsfiddle. However, I'd also second @SenorAmor's comment that you shouldn't start ids with numbers.

Erik Philips · Answer 2 · 2012-04-21T04:57:31.900

Without seeing your HTML, if your HTML looked something like (and updated):

<div id="buttoncollection">
 <div id="link20111" class="button">button 20111</div>
 <div id="link20112" class="button">button 20112</div>
 <div id="link20113" class="button">button 20113</div>
</div>

<div id="bottomrightbox">
 <div class="link20111">link20111</div>
 <div class="link20112">link20112</div>
 <div class="link20113">link20113</div>
</div>

Then you could easily do:

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

  $('#bottomrightbox').children().hide();

  $('#buttoncollection .button').click(function (event) {
    $('#bottomrightbox').children().hide();
    $('#bottomrightbox .' + event.target.id).fadeIn(500);
  });
});

JsFiddle Example

UPDATE

Updated JsFiddle Example based on your comment JsFiddle

score 0 · Answer 3 · answered Apr 21 '12 at 04:28

Not sure of your HTML, but this will work. I also added an alert that you can uncomment.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<a href="javascript:void(0);" class="someclass" id="20111">20111</a><br />
<a href="javascript:void(0);" class="someclass" id="20112">20112</a><br />
<a href="javascript:void(0);" class="someclass" id="20113">20113</a><br />
<a href="javascript:void(0);" class="someclass" id="20114">20114</a><br />

<div id="bottomrightbox">
<div id="20111">apples</div>
<div id="20112">oranges</div>
<div id="20113">banana</div>
<div id="20114">lemon</div>
</div>

<script type="text/javascript">
$('.someclass').click(function(){
var divid = this.id;
// alert(divid);
$('#bottomrightbox').children().not('#'+divid).hide();
});
</script>

click two different buttons and all the fruits will be gone – Lie Ryan Apr 21 '12 at 04:35 — Lie Ryan, Apr 21 '12 at 04:35

In jQuery how do I write a dynamic function to show and hide multiple divs that have distinct IDs?

3 Answers3