www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: jQuery - Expanding/Collapsing multiple buttons at once?

  1. #1
    Join Date
    Feb 2014
    Posts
    25

    Lightbulb jQuery - Expanding/Collapsing multiple buttons at once?

    Hi, I have a few buttons which currently expand and collapse to reveal tables, however I'd like to have a button that when clicked expands or collapses them all at once.

    How could I accomplish this? I'm not sure if I need to change the naming scheme of my buttons or just the javascript, and am just hoping for some direction to go in. My HTML and JS code is below... Thank you


    JS
    Code:
    $(document).ready(function(){
        $('td').addClass('hasRowSpan'); //add class to table rows -- for stopping highlighting
    	
    	$(".btn").click(function(){
    	// if button is clicked, go to next div from that and toggle collapse
            $(this).next('div').collapse('toggle');
        });
    	
    	//button to expand all boxes
    	//.otherbtn is an example of the name of the button
    	$(".otherbtn").click(function(){
    		if($("#toggleDemo").is(":visible")){ $("toggleDemo").collapse('toggle'); }
    	//need it to collapse toggle for all of them if they are not toggled	
    		else{ $("toggleDemo").collapse('toggle'); }
    	});
    })
    HTML
    Code:
    <body>
    
    
    
    
    
     <div class="container">
          <div class="hero-unit">
              
           
    	   </div>
    
    
    <input type="button" id="otherbtn" class="btn btn-block btn-info btn-lg role="button" value="otherbtn">
    <div>		
    	
    <!-- FIRST CATEGORY -->
    <div class="bs-example">
        <!-- Trigger Button HTML -->
        <input type="button" class="btn btn-block btn-info btn-lg role="button" value="Srcing">
        <!-- Collapsible Element HTML -->
        <div data-role="collapsible" class="collapse" id="toggleDemo">
    
    <table class="table table-bordered table-condensed table-hover">
    	<thead>
    	
    	</thead>
    	
      <tbody>
      <tr>
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
      </tr>
      <tr>
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        
      </tr>
      <tr>	
         <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	 
         <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	 
        
         <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	 
         <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	 
    	 <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	 
      </tr>
      <tr>
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
      </tr>
      <tr>
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
      </tr>  
      <tr>
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>r>
    	
        
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
      </tr>  
      <tr>
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
      </tr>  
      <tr>
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
      </tr> 
    
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
      </tr>
    </tbody>  
    </table>
    </div>
    </div>
    
    <br />
    
    <!-- SECOND CATEGORY -->
    <div class="bs-example">
    	<!-- Trigger Button HTML -->
    	<input type="button" class="btn btn-block btn-info btn-lg role="button" value="Logistics">
    	<!-- Collapsible Element HTML -->
    	<div data-role="collapsible" class="collapse" id="toggleDemo">
    	
    <table class="table table-bordered table-condensed table-hover">
    	<thead>
    	</thead>
    	<tbody>
      <tr> 
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
       </tr>
      <tr> 
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
    	
       </tr>  
      <tr> 
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        
        <td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        
    	<td align="center" style="vertical-align:middle" width="300"><center><img></td>
    	
        <td align="center" style="vertical-align:middle" width="300"><!--"><img></td>-->
        
       </tr> 
    </tbody>
    </table>
    </div>
    </div>
    <br />
    
    ..........................
    
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    This is a little tricky for me to test because I don't know what additional scripts/libraries/plugins you are using with jQuery. I've never seen the collapse() function and I couldn't find any reference to it just now...

    Anyway, more than likely you're just wanting to do something like:
    Code:
      $(".otherbtn").click(function(){
        $(".collapse").collapse('toggle');
      });
    Though, to be fair that would logically open back up hidden tables and close visible ones, rather than force them all to be the same state. Not having any info on the collapse() function kind of limits me coming up with a solution for that part.
    Last edited by Sup3rkirby; 03-21-2014 at 09:13 AM.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Feb 2014
    Posts
    25
    I am using jQuery and also Bootstrap; I guess that collapse() function may be Bootstrap? I'm not completely sure which one it may be for anymore...

    Yes that is the main issue I'm having; getting them to toggle is one thing, but if one was already open then it will be completely off from the rest. I'm hoping to find some way to perform a check so that they're all "on the same page"

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Yup, collapse() is a bootstrap function. It turns out there is alternatively a way to just show or hide using the collapse() function.
    Code:
    var $showAll = false;
    $(".otherbtn").click(function(){
      if($showAll == true) {
        $(".collapse").collapse('show');
        $showAll = false;
      } else {
        $(".collapse").collapse('hide');
        $showAll = true;
      }
    });
    However this still isn't perfect. Using the extra $showAll variable allows you to know whether they should all be shown or hidden, but you may want to update the variable elsewhere since it won't change when using the other buttons.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Feb 2014
    Posts
    25
    It's almost working thank you!

    It's working correctly on the first click so far, and opens them all, but then doesn't respond when I click it again to try and close it. Any ideas?

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    You might need to move the 'var $showAll = false;' line outside of the $(document).ready(function(){}); statement. As far as I know, variables declared inside of there are not global and will not be usable on any calls outside of that (for instance, the newly created event handler for your button).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Feb 2014
    Posts
    25
    It's almost working thank you!

    It's working correctly on the first click so far, and opens them all, but then doesn't respond when I click it again to try and close them. Any ideas to what could be causing this?

  8. #8
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Weird, that seemed like a double post, except they are an hour apart...

    Anyway, I'm not sure exactly how you have your code setup right now but I'm just suggesting something like this:
    Code:
    var $showAll = false;
    $(document).ready(function(){
      $('td').addClass('hasRowSpan'); //add class to table rows -- for stopping highlighting
    	
    	$(".btn").click(function(){
    	// if button is clicked, go to next div from that and toggle collapse
        $(this).next('div').collapse('toggle');
      });
    	
    	//button to expand all boxes
    	//.otherbtn is an example of the name of the button
    	$(".otherbtn").click(function(){
    		if($showAll == true) {
    			$(".collapse").collapse('show');
    			$showAll = false;
    		} else {
    			$(".collapse").collapse('hide');
    			$showAll = true;
    		}
    	});
    });
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  9. #9
    Join Date
    Feb 2014
    Posts
    25
    Whoa sorry about that, I came back to look at the post later and it was still in the page where you type it so I thought I never hit send... Strange

    Thank you but it doesn't look like adding that line before the doc ready line doesn't seem to be changing anything -- it still won't collapse all. Maybe instead of 'hide' there's a different command?

  10. #10
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Strange... collapse('hide') is straight from the bootstrap documentation so it should be correct. How about adding a line at the beginning of that function (before the if statement):
    Code:
    console.log($showAll);
    Then just press F12 and check the console tab to see what the value of that variable is each time you click the button. Logically it should be toggling between true and false, but if it isn't then it would explain why the function isn't working both ways.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  11. #11
    Join Date
    Feb 2014
    Posts
    25
    Ok where would I see this? When I press F12 it brings up my Google Chrome developer tool console, which shows the html elements and css. I don't see anything having to do with the Javascript though

  12. #12
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    There are tabs on the Google Chrome developer tool. The default tab is 'Elements'. The last tab (unless you have other extensions installed) should be 'Console'. This is where you will see all logged console messages (as well as javascript errors).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  13. #13
    Join Date
    Feb 2014
    Posts
    25
    Thanks for the clarification, this looks like it could definitely be of use

    I'm not seeing any errors thrown... Even after running the page and clicking the buttons the only thing under console is "false Collapse%20-%20Copy.js:6"

  14. #14
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    So each time you click the button 'false' is logged in the console?

    If that's the case then it's not updating the variable for some reason... try something like this and check the logs as well as you click the button:
    Code:
    var $showAll = false;
    $(document).ready(function(){
      $('td').addClass('hasRowSpan'); //add class to table rows -- for stopping highlighting
    	
      $(".btn").click(function(){
        // if button is clicked, go to next div from that and toggle collapse
        $(this).next('div').collapse('toggle');
      });
    	
    	//button to expand all boxes
    	//.otherbtn is an example of the name of the button
    	$(".otherbtn").click(function(){
    		if($showAll == true) {
    			$showAll = false;
    			$(".collapse").collapse('show');
    		} else {
    			$showAll = true;
    			$(".collapse").collapse('hide');
    		}
                    console.log($showAll);
    	});
    });
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  15. #15
    Join Date
    Feb 2014
    Posts
    25
    Sure thing, just tried it with that code and now the console is blank upon loading the page. After I expand the buttons, it says true. After i click the button again it says false (still doesn't actually collapse though)

    Is this info of any use?

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