dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Collapsing buttons in bootstrap problem

  1. #1
    Join Date
    Feb 2014
    Posts
    25

    Collapsing buttons in bootstrap problem

    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 (as an example):

    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, 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
    Mar 2007
    Location
    localhost
    Posts
    2,881
    Your code is JQuery, although JQuery is written in JavaScript, JQuery is a framework, so please ask in the JQuery (frameworks) forum.
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Feb 2014
    Posts
    25
    Ok I reposted it there, thank you

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