Results 1 to 4 of 4

Thread: show/hide DIV on checkbox click problem

  1. #1
    Join Date
    Jun 2013

    Question show/hide DIV on checkbox click problem

    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:

    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.

  2. #2
    Join Date
    May 2006
    Somewhere behind your screen
    try using class instead of id. example
    signature under construction

  3. #3
    Join Date
    Mar 2009
    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.

    // 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;

  4. #4
    Join Date
    Sep 2007
    <meta charset="utf-8">
    <title> Untitled </title>
    <style type="text/css">
     .hidden{ margin-left:30px;}
    <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
    <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>
    <input type="checkbox"  class="trigger">inş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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center