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,648
    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
    501
    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
    Location
    istanbul
    Posts
    315
    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>
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

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