CODEWITHSUNDEEP
jqueryshow-hidehtml
jaguarhaus
jaguarhaus

Reputation: 247

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

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/

Upvotes: 0

Views: 685

Answers (3)

Erik Philips
Erik Philips

Reputation: 54628

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

Upvotes: 0

Patriotec
Patriotec

Reputation: 1144

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>

Upvotes: 0

Lie Ryan
Lie Ryan

Reputation: 64845

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.

Upvotes: 1

Related Questions