www.webdeveloper.com
Results 1 to 13 of 13

Thread: Problem collapsing and expanding tables from clicking buttons

  1. #1
    Join Date
    Feb 2014
    Posts
    25

    Problem collapsing and expanding tables from clicking buttons

    Hello,

    It looks like you guys have a great forum here, so I decided to join and see if anybody could assist me with something that's been driving me crazy for the past few days.

    I have multiple long-width bootstrap buttons that I would like to be expandable and collapsable upon clicking; but the way I have the code now it will only keep expanding and collapsing the very first tab regardless of which button I hit.

    I have a feeling I need to give each button it's own ID and somehow call that in the bootstrap javascript, but I've been unable to find the solution so far.


    Here is the code for 2 of the buttons, with each button having it's own table under it that I want to collapse/expand:

    First button:
    Code:
    <!-- SALES AND SOURCING-->
    <div class="bs-example">
        <!-- Trigger Button HTML -->
        <input type="button" class="btn btn-block btn-info btn-lg role="button" value="Sales and Sourcing">
        <!-- Collapsible Element HTML -->
        <div id="toggleDemo">
    
    <table class="table table-bordered table-condensed table-hover">
    <!-- rest of the table code -->
    Second button:
    Code:
    <div class="bs-example">
        <!-- Trigger Button HTML -->
        <input type="button" id="test" class="btn btn-block btn-info btn-lg role="button" value="Logistics">
        <!-- Collapsible Element HTML -->
        <div id="toggleDemo1">
    	
    <table class="table table-bordered table-condensed table-hover">
    <!-- rest of the table code -->
    Javascript:
    Code:
    $(document).ready(function(){
        $(".btn").click(function(){
            $("#toggleDemo").collapse('toggle');
        });
    });
    Currently the problem is that clicking any button just opens/closes the first button's table, but no others.

    Do I need to duplicate the JS code for each button I want to collapse? How can I make it point to that instead of just all buttons?

  2. #2
    Join Date
    Feb 2014
    Location
    Managua, Nicaragua
    Posts
    39
    I recoment u tho use this jQuery code insted:

    Code:
    jQuery(document).ready(function($){
        $(".btn").click(function(){
            $(this).next('div').collapse('toggle');
        });
    });
    Try it and tell me if works....

    hope to be helpful

  3. #3
    Join Date
    Feb 2014
    Posts
    25
    It worked when I used that code with the regular "$(document).ready(function(){" on the first line, thank you so much!

    By that same token, do you know how I could add a button that when clicked could Expand or Collapse ALL the other buttons on the page?

  4. #4
    Join Date
    Feb 2014
    Location
    Managua, Nicaragua
    Posts
    39
    Code:
    jQuery(document).ready(function($){
        $(".btn").click(function(){
            $(this).next('div').collapse('toggle');
        });
    	
    	//button to expand all boxes
    	//.otherbtn is an example of the name of the button
    	$(".otherbtn").click({
    		if($("#toggleDemo").is(":visible")){ $("#toggleDemo").slideUp(); }
    		else{ $("#toggleDemo").slideDown(); }
    	});
    })
    And my recomendation is to chance the name of the divs ('toggleDemo', 'toggleDemo1', 'toggleDemo2', etc) to 'toggleDemo'... All them with the same name, to this code work...

    hope to be helpful

  5. #5
    Join Date
    Feb 2014
    Posts
    25
    Thank you JCPerez, I really appreciate your responses and they are really helping me out!

    I'm having one issue with that code you just posted; it looks like when I add in the second part (for the expand all), it breaks the first part, making it so none of the buttons work? Any ideas what I could be doing wrong? Also, I just double checked and i do have all the divs id set to "toggleDemo", without any numbers

    Thank you

  6. #6
    Join Date
    Feb 2014
    Location
    Managua, Nicaragua
    Posts
    39
    Ok, do it me an favor... Post the full htlm with jQuery code to can help u... To see how many buttons u have and all details...

    So, i can test the code and give u the solution...

    And dont worry, thats why we are here, to help u to get in this amazing world

  7. #7
    Join Date
    Feb 2014
    Location
    Managua, Nicaragua
    Posts
    39
    ohhhh sorry, i already see my mistake... this is the correct code

    Code:
    jQuery(document).ready(function($){
        $(".btn").click(function(){
            $(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").slideUp(); }
    		else{ $("#toggleDemo").slideDown(); }
    	});
    })

  8. #8
    Join Date
    Feb 2014
    Posts
    25
    Thank you, I am definitely enjoying learning this, very cool to watch things start coming together

    I can post the full code if I need to but it's a site with login information for websites so I'd need to remove some parts before posting it

    This code now has the other buttons working normally which is a great. I made a button 'otherbtn' but the problem is that it collapses the buttons, but not the actual content "inside" the buttons that collapses out... Do you know how I could add in a part for the new button that does a collapse('toggle') on all of the other buttons so they're all collapsed or expanded?

  9. #9
    Join Date
    Feb 2014
    Location
    Managua, Nicaragua
    Posts
    39
    which is ur site? so, i can see the problem?? And help u with a solution...

  10. #10
    Join Date
    Feb 2014
    Posts
    25
    Here is what my code looks like with the private stuff taken out:

    Thanks!

    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="Sales and Sourcing">
        <!-- 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>

  11. #11
    Join Date
    Feb 2014
    Posts
    25
    Currently it just slides the buttons up/down, but what I want it to do is to collapse them or uncollapse them. Do you know how I could change the JS code to do this?

  12. #12
    Join Date
    Feb 2014
    Posts
    25
    Hello JCPerez hope all is well, do you happen to know how to do this?

  13. #13
    Join Date
    Feb 2014
    Posts
    25
    Bump , does any kind person know how to tell all the buttons at once to collapse/expand?

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