CODEWITHSUNDEEP
twitter-bootstrap
Justin Brown
Justin Brown

Reputation: 75

Twitter Bootstrap Toggle Button, First one in page works ok, second does not

I have a page set up in twitter bootstrap, what I have are two areas, with a twitter bootstrap "collapse/toggle button" at the bottom, which is used to show/hide additional information. The first one on the page seems to work ok, but the second one (which is identical in all ways except for the identifying class) does not function.

Does twitter bootstrap allow multiple "collapse effects" on the same page, and if so, why isn't the code I've written working?

I have attached the code of my html below and set up a jsfiddle of the problem

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>JORDAN</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="author" content="Justin Brown">

<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple- 
touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-
touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-
icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-
precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">






</head>
<body data-target=".bs-docs-sidebar" class="tourspage">


<div class="wrap">
<!-- Navbar
================================================== -->
<div class="navbar">
<div class="container">
<div class="navbar-inner">

    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-
target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="brand" href="#" title="JORDAN"><img src="assets/img/logo.gif" 
alt="JORDAN" /></a>

    <div class="nav-collapse collapse">
    <ul class="nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About Jordon</a></li>
    <li><a href="#">Places</a></li>
    <li><a href="#">Tours</a></li>      
    <li><a href="#">Blog</a></li>
    <li><a href="#">About Us</a></li>
    </ul>
    </div>

</div>
</div>
</div><!-- navbar -->



<div class="container">

    <div class="toursinfo">
        <h1>Tours</h1>
        <article class="nodivider">
        <p>These are some of our most popular tours with details, prices, 
and itineraries. You can sign up for a tour right from here, or you can create a custom 
version of the tour from our Custom Tour page.</p>

        <!-- start the tours block -->
        <aside>
        <p>
        <span class="left">View from a Jeep </span>
        <span class="right">(3 days, 2 nights)</span>
        </p>

        <p>
        <span class="left">Price per Person </span>
        <span class="right">$1350</span>
        </p>

        <p>
        <span class="left">Activities</span>
        <span class="right">
        <a href="#">Jeeping</a>   
        <a href="#">Camping</a>  
        <a href="#">History</a></span>
        </p>

        <p>
        <span class="left">Places</span>
        <span class="right">
        <a href="#">Wadi Mujib</a>   
        <a href="#">Petra</a>   
        <a href="#">Little Petra</a>   
        <a href="#">Dead Sea</a>   
        <a href="#">Wadi Dona</a>   
        <a href="#">Wadi Feinan</a>   
        <a href="#">Old Humeiah</a></span>
        </p>
        </aside>

        <figure><img src="assets/img/photo15.jpg" alt="PHOTO"></figure>

        <p><span class="bold">Description</span> <br /> Bertase deleoa 
dipisg elitve sibulum cude enoserta dendrit maurportade usceita varere meroserta 
kertasera miatoque penatib
        emagnis keras. Lorem ipsum dolor sit amet conse ctetur adipisicing 
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat.
        Duis qute irure dolor.  </p>

        <a href="#" class="btn-hide" data-toggle="collapse" data-
target=".details">Details</a>

        <a href="#" class="btn-booknow">Book Now!</a>

        <div class="details collapse">
        <div class="daysinfo nodivider">
        <h3><span>DAY 1</span></h3>
        <div class="info">
        <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit 
maurportade usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem 
ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis qute irure dolor.</p>
        <p><span><span class="orange">Meals:</span> Breakfast, Dinner, 
Snacks.</span>  <span><span class="orange">Hotel:</span> Al Arrabiys Hotel.</span>
        <span><span class="orange">Travel Time:</span> Approx 2 Hours.
</span> </p>
        </div>
        </div>

        <div class="daysinfo">
        <h3><span>DAY 2</span></h3>
        <div class="info">
        <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit 
maurportade usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem 
ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis qute irure dolor.</p>
        <p><span><span class="orange">Meals:</span> Breakfast, Dinner, 
Snacks.</span>  <span><span class="orange">Hotel:</span> Al Arrabiys Hotel.</span>
        <span><span class="orange">Travel Time:</span> Approx 2 Hours.
</span> </p>
        </div>
        </div>

        <div class="daysinfo">
        <h3><span>DAY 3</span></h3>
        <div class="info">
        <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit   
maurportade usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem 
ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis qute irure dolor.</p>
        <p><span><span class="orange">Meals:</span> Breakfast, Dinner, 
Snacks.</span>  <span><span class="orange">Hotel:</span> Al Arrabiys Hotel.</span>
        <span><span class="orange">Travel Time:</span> Approx 2 Hours.
</span> </p>
        </div>
        </div>
        </div>
        </article>
        <!-- end tour block -->
























    </div><!-- toursinfo -->





</div><!-- container -->

<div id="push"></div>
</div><!-- end wrap -->
<!-- Footer
================================================== -->
<div class="bgfooter">
<footer>

    <div class="container">
    <p>&copy; 2013</p>
    <p class="right">
    <a href="#">Sitemap</a>        
    <a href="#">FAQ</a>        
    <a href="#">Contact Us</a>
    </p>
    </div>

</footer>
</div><!-- footer -->


<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
<script src="assets/js/holder/holder.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/application.js"></script>


</body>
</html>

EDIT: As requested by user @Shail I've attached only the accordion part of the code:

 <!-- start the tours block -->
        <aside>
        <p>
        <span class="left">View from a Jeep </span>
        <span class="right">(3 days, 2 nights)</span>
        </p>

        <p>
        <span class="left">Price per Person </span>
        <span class="right">$1350</span>
        </p>

        <p>
        <span class="left">Activities</span>
        <span class="right">
        <a href="#">Jeeping</a>   
        <a href="#">Camping</a>  
        <a href="#">History</a></span>
        </p>

        <p>
        <span class="left">Places</span>
        <span class="right">
        <a href="#">Wadi Mujib</a>   
        <a href="#">Petra</a>   
        <a href="#">Little Petra</a>   
        <a href="#">Dead Sea</a>   
        <a href="#">Wadi Dona</a>   
        <a href="#">Wadi Feinan</a>   
        <a href="#">Old Humeiah</a></span>
        </p>
        </aside>

        <figure><img src="assets/img/photo15.jpg" alt="PHOTO"></figure>

        <p><span class="bold">Description</span> <br /> Bertase deleoa 
dipisg elitve sibulum cude enoserta dendrit maurportade usceita varere meroserta 
kertasera miatoque penatib
        emagnis keras. Lorem ipsum dolor sit amet conse ctetur adipisicing 
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat.
        Duis qute irure dolor.  </p>

        <a href="#" class="btn-hide" data-toggle="collapse" data-
target=".details">Details</a>

        <a href="#" class="btn-booknow">Book Now!</a>

        <div class="details collapse">
        <div class="daysinfo nodivider">
        <h3><span>DAY 1</span></h3>
        <div class="info">
        <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit 
maurportade usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem 
ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis qute irure dolor.</p>
        <p><span><span class="orange">Meals:</span> Breakfast, Dinner, 
Snacks.</span>  <span><span class="orange">Hotel:</span> Al Arrabiys Hotel.</span>
        <span><span class="orange">Travel Time:</span> Approx 2 Hours.
</span> </p>
        </div>
        </div>

        <div class="daysinfo">
        <h3><span>DAY 2</span></h3>
        <div class="info">
        <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit 
maurportade usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem 
ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris   
nisi ut aliquip ex ea commodo consequat. Duis qute irure dolor.</p>
        <p><span><span class="orange">Meals:</span> Breakfast, Dinner, 
Snacks.</span>  <span><span class="orange">Hotel:</span> Al Arrabiys Hotel.</span>
        <span><span class="orange">Travel Time:</span> Approx 2 Hours. 
</span> </p>
        </div>
        </div>

        <div class="daysinfo">
        <h3><span>DAY 3</span></h3>
        <div class="info">
        <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit  
maurportade usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem 
ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis qute irure dolor.</p>
        <p><span><span class="orange">Meals:</span> Breakfast, Dinner, 
Snacks.</span>  <span><span class="orange">Hotel:</span> Al Arrabiys Hotel.</span>
        <span><span class="orange">Travel Time:</span> Approx 2 Hours.
</span> </p>
        </div>
        </div>
        </div>
        </article>
        <!-- end tour block -->

Upvotes: 1

Views: 555

Answers (1)

Shail
Shail

Reputation: 3649

After Question Edit :- The issue was related to some unclosed Tags and css

Jsfiddle with your code : jsfiddle

Jsfiddle in browser : See live in browser

Add The following css in your stylesheet :

.toursinfo .details1 {
float: left;
padding-bottom: 17px;
width: 100%;
}

And use the following HTML :

<div class="toursinfo">
 <h1>Tours</h1>

<article class="nodivider">
    <p>These are some of our most popular tours with details, prices, and itineraries.
        You can sign up for a tour right from here, or you can create a custom
        version of the tour from our Custom Tour page.</p>
    <!-- start the tours
    block -->
    <aside>
        <p> <span class="left">View from a Jeep </span>  <span class="right">(3 days, 2 nights)</span> 
        </p>
        <p> <span class="left">Price per Person </span>  <span class="right">$1350</span> 
        </p>
        <p> <span class="left">Activities</span>  <span class="right"> <a href="#">Jeeping</a> <a href="#">Camping</a> <a href="#">History</a></span> 
        </p>
        <p> <span class="left">Places</span>  <span class="right"> <a href="#">Wadi Mujib</a> <a href="#">Petra</a> <a href="#">Little Petra</a> <a href="#">Dead Sea</a> <a href="#">Wadi Dona</a> <a href="#">Wadi Feinan</a> <a href="#">Old Humeiah</a></span> 
        </p>
    </aside>
    <figure>
        <img src="assets/img/photo15.jpg" alt="PHOTO">
    </figure>
    <p><span class="bold">Description</span> 
        <br />Bertase deleoa dipisg elitve sibulum cude enoserta dendrit maurportade
        usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem
        ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis qute irure dolor.</p> <a href="#" class="btn-hide" data-toggle="collapse"
    data-target=".details">Details</a>  <a href="#" class="btn-booknow">Book Now!</a>

    <div
    class="details collapse">
        <div class="daysinfo nodivider">
             <h3><span>DAY 1</span></h3>

            <div class="info">
                <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit maurportade
                    usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem
                    ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis qute irure dolor.</p>
                <p><span><span class="orange">Meals:</span> Breakfast, Dinner, Snacks.</span> <span><span class="orange">Hotel:</span> Al
                    Arrabiys Hotel.</span> <span><span class="orange">Travel Time:</span> Approx
                    2 Hours.</span>
                </p>
            </div>
        </div>
        <div class="daysinfo">
             <h3><span>DAY 2</span></h3>

            <div class="info">
                <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit maurportade
                    usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem
                    ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis qute irure dolor.</p>
                <p><span><span class="orange">Meals:</span> Breakfast, Dinner, Snacks.</span> <span><span class="orange">Hotel:</span> Al
                    Arrabiys Hotel.</span> <span><span class="orange">Travel Time:</span> Approx
                    2 Hours.</span>
                </p>
            </div>
        </div>
        <div class="daysinfo">
             <h3><span>DAY 3</span></h3>

            <div class="info">
                <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit maurportade
                    usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem
                    ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis qute irure dolor.</p>
                <p><span><span class="orange">Meals:</span> Breakfast, Dinner, Snacks.</span> <span><span class="orange">Hotel:</span> Al
                    Arrabiys Hotel.</span> <span><span class="orange">Travel Time:</span> Approx
                    2 Hours.</span>
                </p>
               </div>
            </div>
          </div>
        </article>
<!-- end tour block -->
<article class="divider">
<p>These are some of our most popular tours with details, prices, and itineraries.
    You can sign up for a tour right from here, or you can create a custom
    version of the tour from our Custom Tour page.</p>
<!-- start the tours
block -->
<aside>
    <p> <span class="left">View from a Jeep </span>  <span class="right">(3 days, 2 nights)</span> 
    </p>
    <p> <span class="left">Price per Person </span>  <span class="right">$1350</span> 
    </p>
    <p> <span class="left">Activities</span>  <span class="right"> <a href="#">Jeeping</a> <a href="#">Camping</a> <a href="#">History</a></span> 
    </p>
    <p> <span class="left">Places</span>  <span class="right"> <a href="#">Wadi Mujib</a> <a href="#">Petra</a> <a href="#">Little Petra</a> <a href="#">Dead Sea</a> <a href="#">Wadi Dona</a> <a href="#">Wadi Feinan</a> <a href="#">Old Humeiah</a></span> 
    </p>
</aside>
<figure>
    <img src="assets/img/photo15.jpg" alt="PHOTO">
</figure>
<p><span class="bold">Description</span> 
    <br />Bertase deleoa dipisg elitve sibulum cude enoserta dendrit maurportade
    usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem
    ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis qute irure dolor.</p> <a href="#" class="btn-hide" data-toggle="collapse"
data-target=".details1">Details</a>  <a href="#" class="btn-booknow">Book Now!</a>

<div
class="details1 collapse">
    <div class="daysinfo ">
         <h3><span>DAY 1</span></h3>

        <div class="info">
            <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit maurportade
                usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem
                ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis qute irure dolor.</p>
            <p><span><span class="orange">Meals:</span> Breakfast, Dinner, Snacks.</span> <span><span class="orange">Hotel:</span> Al
                Arrabiys Hotel.</span> <span><span class="orange">Travel Time:</span> Approx
                2 Hours.</span>
            </p>
        </div>
          </div>
        <div class="daysinfo">
         <h3><span>DAY 2</span></h3>

        <div class="info">
            <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit maurportade
                usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem
                ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis qute irure dolor.</p>
            <p><span><span class="orange">Meals:</span> Breakfast, Dinner, Snacks.</span> <span><span class="orange">Hotel:</span> Al
                Arrabiys Hotel.</span> <span><span class="orange">Travel Time:</span> Approx
                2 Hours.</span>
            </p>
        </div>
    </div>
    <div class="daysinfo">
         <h3><span>DAY 3</span></h3>

        <div class="info">
            <p>Bertase deleoa dipisg elitve sibulum cude enoserta dendrit maurportade
                usceita varere meroserta kertasera miatoque penatib emagnis keras. Lorem
                ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis qute irure dolor.</p>
            <p><span><span class="orange">Meals:</span> Breakfast, Dinner, Snacks.</span> <span><span class="orange">Hotel:</span> Al
                Arrabiys Hotel.</span> <span><span class="orange">Travel Time:</span> Approx
                2 Hours.</span>
            </p>
        </div>
    </div>
    </div>
  </article>
 </div>

Upvotes: 1

Related Questions