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
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

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