www.webdeveloper.com
Results 1 to 4 of 4

Thread: show/hide DIV on checkbox click problem

  1. #1
    Join Date
    Jun 2013
    Posts
    1

    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:
    Code:
    $(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.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    try using class instead of id. example
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

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

    Code:
    $(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');
    	      });
        }
        });

  4. #4
    Join Date
    Sep 2007
    Posts
    301
    Code:
      
    <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ş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>
    İyiliği emret. Kötülükten alıkoy. (31/16)

    hasbunallahuVeNimelVekil++

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



Recent Articles