show/hide DIV on checkbox click problem

This site is best viewed in a modern browser with JavaScript enabled.

show/hide DIV on checkbox click problem

johnmdotme

Hello everyone!

So, I'm looking for a more clever way to go about what I need to accomplish.

On this page: HERE

Im trying to show another option when they click a checkbox. You can see it working on the first checkbox you click, it will toggle the next option.

Code im using:

$(document).ready(function(){
    $("#1ade14b3abc5004d7c0b7f5b6479638a").click(function(){
        $("#27bd46bdc4f44628a02733561d3084ba").toggle('slow');
    });

});

Now the problem is that each option has a unique ID and there are 74+ products. Doing it this way would take 4-5 hours.

Id like to find a more clever way to do this that will work across all similar products. Perhaps search for a string of text and tell it to display the the very next div? Ive got no idea!

Any ideas would be greatly appreciated.

Padonak

try using class instead of id. example

Tcobb

I don't know if this will help you or not. Normally I avoid jQuery. If it breaks you get to keep all the pieces.

$(document).ready(function(){
// Assume all these divs are children of one master
// container--if not provide one--assume the id of that is "master"
    var ch, m, i, len, a, b;
    m = document.getElementById('master');
    ch = m.getElementsByTagName('div');
    len = ch.length;

for(i = 0; i < (len -1); i++){
  a = '#' + ch[i].id;
  b = '#' + ch[(i+1)].id;

  $(a).click(function(){
	  $(b).toggle('slow');
      });
}
});

Ay__351_e

  

<html>
<head>
<meta charset="utf-8">
<title> Untitled </title>
<style type="text/css">
 .hidden{ margin-left:30px;}
</style>

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

<script type="text/javascript">
// http://api.jquery.com/toggleClass/
// http://www.akifkaraagac.com/addclass-removeclass-toggleclass-jquery-css-isemleri/
// http://www.webdeveloper.com/forum/showthread.php?279325-show-hide-DIV-on-checkbox-click-problem
// http://www.sitepoint.com/forums/showthread.php?826197-Show-Hide-Multiple-Divs&p=5053586&highlight=#post5053586

$(document).ready(function(){
    $(".hidden").hide();
    $("input.trigger").click(function(){
    $(this).next(".hidden").slideToggle("slow,");
    });
});
 </script>

</head>
<body>
<input type="checkbox" class="trigger">Fatiha, Yasin, Vakia, Fetih
<div class="hidden">
 <input type="checkbox">fatiha.mp3 <br>
 <input type="checkbox">yasin.mp3 <br>
 <input type="checkbox">056Vakia.mp3 <br>
 <input type="checkbox">048Fetih.mp3<br>

</div>
<br>
<input type="checkbox"  class="trigger">in&#351;irah, ayetel kürsi, Felak, Nas
<div class="hidden">
<input type="checkbox">094inshirah_01.mp3 <br>
<input type="checkbox">ayetel_kursi.mp3<br>
<input type="checkbox">113Felak.mp3<br>
<input type="checkbox">114Nas.mp3<br>

</div>
</body>
</html>