Twitterブートストラップにページを設定しました.2つの領域があり、下部にTwitterブートストラップの「折りたたみ/切り替えボタン」があり、追加情報の表示/非表示に使用されます。ページの最初のものは正常に動作しているように見えますが、2 番目のもの (識別クラスを除いてすべての点で同一) は機能しません。
Twitter のブートストラップでは、同じページで複数の「折りたたみ効果」を使用できますか? もしそうなら、なぜ私が書いたコードが機能しないのですか?
以下に私のhtmlのコードを添付し、問題のjsfiddleを設定しました
<!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>© 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>
編集: ユーザー @Shail の要求に応じて、コードのアコーディオン部分のみを添付しました。
<!-- 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 -->