Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Question show/ hide div with accordion heading

    I am trying to hide and show images in a div next to an bootstrap accordion. The javascript I'm using works, there is only one problem.

    I want when the accordion is closed, hide the div with the images, this works if I click the same accordion heading. Unfortunately if the accordion is open and I click another heading of the accordion the div with the images hides.

    Here is the fiddle with the code:http://jsfiddle.net/j2KSB/
    You have to expand the result window to get the div next to the accordion.

  • #2
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts

    clarification

    I need to change the javascript, but I have no idea how to do it, only that I probably need to use an argument in the javascript.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    When I take your code out of 'fiddle' and put it in an editor, save it and then call it up in a browser it does not work the way fiddle is showing it. All fields are expanded and they do not collapse. We just go down the page to the heading we clicked.

    You are missing a </div> for the container, but fixing that didn't help.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    That is strange. I just looked at the fiddle and no problem, but that isn't the main problem I have the working file that works in the browser. I would like to have some additional code to the javascript which I'm using now.
    If accordion closed, div images hide, click accordion heading div images shows and acccordion is open. When another accordion heading is clicked while accordion still open, div images stay shown.
    This is what I'm after. That when the accordion is open at any time the div with images is shown regardless which accordion heading is clicked.
    BTW thanks for taking the time to have a look at this problem.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Why don't you post the working code here. Use the # icon above you in the toolbar to generate [code] tags and put it between the tags.
    Things would be so much easier.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Here is the code.
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"><style type="text/css">
    .accordion{text-align:center;margin-bottom:1px;width:200px;}
    .accordion-group{margin-bottom:2px;}
    .accordion-heading{background-color:#00f;color:#fff;font-size:16px;border-bottom:0;border:1px solid #e5e5e5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    .accordion-heading a{color:#cff;}
    .accordion-heading a:hover {background-color:#f90;color:#fff; text-decoration: none; }
    .accordion-heading .accordion-toggle{display:block;padding:4px 15px;}
    .accordion {cursor:pointer;color:#fff;}
    .accordion-inner{color:#000;border-top:1px solid #e5e5e5;padding-top: 3px;padding-right: 15px;padding-bottom: 3px;padding-left: 15px;}
    #footer{background-color:#00f;color:#fff;display: block;padding: 40px 30px;}
    .picdiv{ background-color:#f00; width:100px; height:70px;}
    #pics{display:none;}
    h2{ font-weight:normal;margin:10px 0;}
    </style>
    </head>
    <body>
    <div class="container">
      <div class="row"><br>
        <div class="span5"><h2 class="center sch-h2">Some text</h2></div>   
      </div>
       <div class="row">
         <div class="span3">
           <div class="accordion" id="myAccordion">
                <div class="accordion-group">
                  <div class="accordion-heading">
                     <a href="#ab" class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" onClick="slideContent('pics');">A</a>
                  </div>
                    <div id="ab" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">1</div>                        
                            <div class="code">2</div>                        
                            <div class="code">3</div>                        
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#bc" onClick="slideContent('pics');">B</a>
                  </div>
                    <div id="bc" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">4</div>                        
                            <div class="code">5</div>                        
                            <div class="code">6</div>                        
                            <div class="code">7</div>                        
                            <div class="code">8</div>                        
                            <div class="code">9</div>                        
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#c" onClick="slideContent('pics');" >C</a>
                  </div>
                    <div id="c" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">10</div>                        
                            <div class="code">11</div>                        
                            <div class="code">12</div>                        
                            <div class="code">13</div>                        
                            <div class="code">14</div>            			
             				<div class="code">15</div>            			
            			</div>
                    </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#d" onClick="slideContent('pics');">D</a>
                  </div>
                    <div id="d" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">16</div>                       
             			    <div class="code">17</div>            		    
              				<div class="code">18</div>            			
              				<div class="code">19</div>            			
              				<div class="code">20</div>            			
               				<div class="code">21</div>            			
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#e" onClick="slideContent('pics');">E</a>
                  </div>
                    <div id="e" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">16</div>                       
             			    <div class="code">17</div>            		    
              				<div class="code">18</div>            			
              				<div class="code">19</div>            			
              				<div class="code">20</div>            			
               				<div class="code">21</div>            			
                        </div>
                    </div>
                </div><div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#f" onClick="slideContent('pics');">F</a>
                  </div>
                    <div id="f" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">16</div>                       
             			    <div class="code">17</div>            		    
              				<div class="code">18</div>            			
              				<div class="code">19</div>            			
              				<div class="code">20</div>            			
               				<div class="code">21</div>            			
                        </div>
                    </div>
                </div><div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#g" onClick="slideContent('pics');">G</a>
                  </div>
                    <div id="g" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">16</div>                       
             			    <div class="code">17</div>            		    
              				<div class="code">18</div>            			
              				<div class="code">19</div>            			
              				<div class="code">20</div>            			
               				<div class="code">21</div>            			
                        </div>
                    </div>
              
                </div>
        </div><!--close accordion-->    
      </div><!-- close span9-->
     <div class="span3">
           <div id="pic">
           <div class="picdiv">image</div><br>
           <div class="picdiv">image</div><br>
           </div>
           <div id="pics">
           <div class="picdiv">image</div><br>
           <div class="picdiv">image</div><br>
           <div class="picdiv">image</div><br>
           </div>
      </div><!--close span3-->
    </div><!--close row-->
    </div><!--close container-->
     <br>  
    <footer id="footer" >
    	<div class="container">
    		<div class="row">FOOTER			
    	</div></div>
    </footer>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>       
    <script type="text/javascript">
    
    function slideContent(id) {
        if ($('#' + id).css('display') == 'none') {
            $('#' + id).slideDown('100', function () { });
        }
        else {
            $('#' + id).slideUp('100', function () { });
        }
    	}
    </script>
    </body>
    </html>

  • #7
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    I posted the code, but the moderator has to look at it.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    You are sending the same info to your JS "pics" for every tab. You need to send a unique id to the JS and only close your pics when the same tab is clicked.
    I change the pics to the href info and placed your if into another if.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"><style type="text/css">
    .accordion{text-align:center;margin-bottom:1px;width:200px;}
    .accordion-group{margin-bottom:2px;}
    .accordion-heading{background-color:#00f;color:#fff;font-size:16px;border-bottom:0;border:1px solid #e5e5e5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    .accordion-heading a{color:#cff;}
    .accordion-heading a:hover {background-color:#f90;color:#fff; text-decoration: none; }
    .accordion-heading .accordion-toggle{display:block;padding:4px 15px;}
    .accordion {cursor:pointer;color:#fff;}
    .accordion-inner{color:#000;border-top:1px solid #e5e5e5;padding-top: 3px;padding-right: 15px;padding-bottom: 3px;padding-left: 15px;}
    #footer{background-color:#00f;color:#fff;display: block;padding: 40px 30px;}
    .picdiv{ background-color:#f00; width:100px; height:70px;}
    #pics{display:none;}
    h2{ font-weight:normal;margin:10px 0;}
    </style>
    </head>
    <body>
    <div class="container">
      <div class="row"><br>
        <div class="span5"><h2 class="center sch-h2">Some text</h2></div>
      </div>
       <div class="row">
         <div class="span3">
           <div class="accordion" id="myAccordion">
                <div class="accordion-group">
                  <div class="accordion-heading">
                     <a href="#ab" class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" onClick="slideContent('ab');">A</a>
                  </div>
                    <div id="ab" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">1</div>
                            <div class="code">2</div>
                            <div class="code">3</div>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#bc" onClick="slideContent('bc');">B</a>
                  </div>
                    <div id="bc" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">4</div>
                            <div class="code">5</div>
                            <div class="code">6</div>
                            <div class="code">7</div>
                            <div class="code">8</div>
                            <div class="code">9</div>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#c" onClick="slideContent('c');" >C</a>
                  </div>
                    <div id="c" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">10</div>
                            <div class="code">11</div>
                            <div class="code">12</div>
                            <div class="code">13</div>
                            <div class="code">14</div>
             				<div class="code">15</div>
            			</div>
                    </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#d" onClick="slideContent('d');">D</a>
                  </div>
                    <div id="d" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">16</div>
             			    <div class="code">17</div>
              				<div class="code">18</div>
              				<div class="code">19</div>
              				<div class="code">20</div>
               				<div class="code">21</div>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#e" onClick="slideContent('e');">E</a>
                  </div>
                    <div id="e" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">16</div>
             			    <div class="code">17</div>
              				<div class="code">18</div>
              				<div class="code">19</div>
              				<div class="code">20</div>
               				<div class="code">21</div>
                        </div>
                    </div>
                </div><div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#f" onClick="slideContent('pifcs');">F</a>
                  </div>
                    <div id="f" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">16</div>
             			    <div class="code">17</div>
              				<div class="code">18</div>
              				<div class="code">19</div>
              				<div class="code">20</div>
               				<div class="code">21</div>
                        </div>
                    </div>
                </div><div class="accordion-group">
                  <div class="accordion-heading">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#g" onClick="slideContent('g');">G</a>
                  </div>
                    <div id="g" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="code">16</div>
             			    <div class="code">17</div>
              				<div class="code">18</div>
              				<div class="code">19</div>
              				<div class="code">20</div>
               				<div class="code">21</div>
                        </div>
                    </div>
    
                </div>
        </div><!--close accordion-->
      </div><!-- close span9-->
     <div class="span3">
           <div id="pic">
           <div class="picdiv">image</div><br>
           <div class="picdiv">image</div><br>
           </div>
           <div id="pics">
           <div class="picdiv">image</div><br>
           <div class="picdiv">image</div><br>
           <div class="picdiv">image</div><br>
           </div>
      </div><!--close span3-->
    </div><!--close row-->
    </div><!--close container-->
     <br>
    <footer id="footer" >
    	<div class="container">
    		<div class="row">FOOTER
    	</div></div>
    </footer>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    var tag = '';
    function slideContent(id) {
    	if(id == tag){
    	    if (($('#pics').css('display') == 'none') && (id == tag)) {
    	        $('#pics').slideDown('100');
    			tag = id;
    	    }else {
    	        $('#pics').slideUp('100');
    			tag = '';
    	    }
    	}else{
    		$('#pics').slideDown('100');
    		tag = id;
    	}
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    Dznr (09-04-2013)

  • #9
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Smile

    It works exactly how I wanted it. Thank you very much Sunfighter.

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    You are welcomed
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #11
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Maybe it is too much to ask. Is it possible to have on the last accordion header "G" a click that doesn't show the div hidden when clicked, but will hide the shown div if it is visible, because the accordion was open before you click on "G".

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    You could have the "G" button call a different function.
    Code:
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#g" onClick="slideG();">G</a>
    In the JS add this function at the end:
    Code:
    function slideG(){
    	if ($('#pics').css('display') != 'none') {
    		$('#pics').slideUp('100');
    		tag = 'g';
    	}else{
    		$('#pics').slideUp('100');
    		tag = '';
    	}
    }
    Or to save a line of code:
    Code:
    function slideG(){
    	if ($('#pics').css('display') != 'none') {
    		tag = 'g';
    	}else{
    		tag = '';
    	}
    	$('#pics').slideUp('100');
    }
    Or save one more line:
    Code:
    function slideG(){
    	tag = '';
    	if ($('#pics').css('display') != 'none') {
    		tag = 'g';
    	}
    	$('#pics').slideUp('100');
    }
    Last edited by sunfighter; 09-04-2013 at 11:29 PM. Reason: saving code lines for future generations.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #13
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    The future generations and I will be in your debt. We will evolve. Thanks a lot.


  •  

    Posting Permissions

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