www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 23 of 23

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

  1. #16
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    If anything it just makes me more curious. It would appear that the code is being run through with no errors but for some odd reason the line to hide everything is doing nothing. Again, I pulled that directly from the bootstrap documentation on their site so I don't see why it wouldn't work.

    Would you mind moving some things around to test a few more things? I'd suggest changing the declaration of the $showAll variable to 'true' instead of 'false'. This should mean it will first try to collapse/hide first, then expand on the 2nd click. I also wonder what happens if you reverse my if/else statement to check for == false first (the lines inside of each clause need to be switched as well).

    And of course just check the log during your clicks. If still no avail then I'll re-investigate this when I get home. I truly hate being defeated by code
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  2. #17
    Join Date
    Feb 2014
    Posts
    25
    Thank you so much for all your help so far, I truly appreciate your time in trying to help me get this working

    I changed the first $showAll to true and the only difference I'm seeing is that instead of saying "true" when I first click it, it start off false now. I tried those other things you suggested and nothing at all seems to change from switching around the first == false check etc. The code I switched it to is below just to be sure I did it right:

    Code:
    var $showAll = true;
    $(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 == false) {
    			$showAll = true;
    			$(".collapse").collapse('hide');
    		} else {
    			$showAll = false;
    			$(".collapse").collapse('show');
    		}
                    console.log($showAll);
    	});
    });

  3. #18
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    Well after trying to recreate everything locally I realize one major flaw.
    Code:
    $(".otherbtn").click(function(){
    The selector was set to apply to the 'otherbtn' class on any element, not the id. So that line should be:
    Code:
    $("#otherbtn").click(function(){
    If that doesn't fix your issue then I'd have to ask to see your full source just because what i'm working with seems to be missing a lot and it's hard to test it properly.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  4. #19
    Join Date
    Feb 2014
    Location
    Delhi
    Posts
    24
    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?

  5. #20
    Join Date
    Feb 2014
    Posts
    25
    SuperKirby I really appreciate your trying to solve this, thank you

    I'm not sure who this guy above me is who replied with something I said a while ago? Very weird...

    Anyway the reason I took out some text from my code is that since it's for something I'm working on for my company there's a bit or proprietary info and stuff on it. If need be I could try to re-do it so there's a bit more of the content; but I thought the tags and structure of it were really all that was important?

    I just don't get why the hide command doesn't work. It can't be an issue of selecting the right objects because they show correctly, but using hide/toggle just seems to do nothing. I've tried changing it in a bunch of ways and just can't seem to figure it out..

  6. #21
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    I only mention it because for instance, I couldn't see that you were originally including bootstrap javascript and so that was something I had to go and include on my own. Little things like that may or may not make a difference. Ultimately I worry that what I'm working with is not what you have.

    My little change from .otherbtn to #otherbtn seemed to solve the hide issue for me, but because my html source is a bit... empty I was noticing some odd behavior with the visibility/overflow of the tables. Meaning, I could see them collapsing but the table itself wasn't hiding the text/content, only reducing its height. This is where I began to wonder if having the actual source vs my mocked up version would help.

    Did you try the swap of .otherbtn to #otherbtn yet?
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #22
    Join Date
    Feb 2014
    Posts
    25
    I completely understand what you're saying. If you believe it seems necessary then I may be able to figure out a way for us to take a look at more of the code.

    Sorry I forgot to mention it, but I did already try swapping the . to a # after you first said it and that didn't give me any positive results. It made the button stop working completely, actually. I'm just completely stumped at to how it works correctly in opening, which means the structure of it is correct, but it just doesn't close...

  8. #23
    Join Date
    Feb 2014
    Posts
    25
    Just wanted to give an update: I managed to "solve" the collapse button issue by making it refresh the page (which always loads collapsed), as opposed to actually collapsing the buttons.

    Thank you for your help Kirby.

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