"Expandable Panel List"
Bootstrap 3.1.0 Snippet by dylanjacob

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel List Group with Expandable Setail Section</h3> </div> <ul class="list-group"> <li class="list-group-item"> <div class="row toggle" id="dropdown-detail-1" data-toggle="detail-1"> <div class="col-xs-10"> Item 1 </div> <div class="col-xs-2"><i class="fa fa-chevron-down pull-right"></i></div> </div> <div id="detail-1"> <hr></hr> <div class="container"> <div class="fluid-row"> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> </div> </div> </li> <li class="list-group-item"> <div class="row toggle" id="dropdown-detail-2" data-toggle="detail-2"> <div class="col-xs-10"> Item 2 </div> <div class="col-xs-2"><i class="fa fa-chevron-down pull-right"></i></div> </div> <div id="detail-2"> <hr></hr> <div class="container"> <div class="fluid-row"> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> </div> </div> </li> <li class="list-group-item"> <div class="row toggle" id="dropdown-detail-3" data-toggle="detail-3"> <div class="col-xs-10"> Item 3 </div> <div class="col-xs-2"><i class="fa fa-chevron-down pull-right"></i></div> </div> <div id="detail-3"> <hr></hr> <div class="container"> <div class="fluid-row"> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-xs-1"> Detail: </div> <div class="col-xs-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> </div> </div> </li> </ul> </div> </div>
$(document).ready(function() { $('[id^=detail-]').hide(); $('.toggle').click(function() { $input = $( this ); $target = $('#'+$input.attr('data-toggle')); $target.slideToggle(); }); });

Related: See More


Questions / Comments:

my the same code does not show goniometer in the right end of box

can you help me?

marybrnji (0) - 1 month ago - Reply 0


this is brilliant. thanks!

我的鲸鱼太帅了 (0) - 3 years ago - Reply 0


It doesn't work for me, may be I improperly attached to the view. Can you help me please?

Абылайхан Байдуллаев (0) - 2 years ago - Reply 0


It's pretty straight forward. Did you include the javascript as well?

我的鲸鱼太帅了 (0) - 2 years ago - Reply 0


I'm new to web programming, I have included, but I don't know correctly is it or not. It shows me the panel list but I can't click and expand it. Can you show me the view file where you use this snippet. Thank you!

Абылайхан Байдуллаев (0) - 2 years ago - Reply -1


Make sure you have the javascript for bootstrap as well as the expandable js.

Here's example of the code. Put this in the head section. This is not the best practice but sufficed for example. Usually I'd have a separate file and folder for javascript & CSS, not hard-coded like below.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn...">

<script src="https://ajax.googleapis.com..."></script>

<script src="https://maxcdn.bootstrapcdn..."></script>

<script>
$(document).ready(function() {
$('[id^=detail-]').hide();
$('.toggle').click(function() {
$input = $( this );
$target = $('#'+$input.attr('data-toggle'));
$target.slideToggle();
});
});
</script>

我的鲸鱼太帅了 (0) - 2 years ago - Reply 0


good! it works after puting <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.co...">

<script src="https://ajax.googleapis.com/aj..."></script>

<script src="https://maxcdn.bootstrapcdn.co..."></script>.

Can you tell me why? Why this references absent on the top (source code). I'm using yii2 php framework. Thank you very much) and sory my bad english

Абылайхан Байдуллаев (0) - 2 years ago - Reply 0


This is because all the codes you found here in Bootsnipp are snippets for website built using Bootstrap framework. Go here http://getbootstrap.com/ to learn more about Bootstrap. It makes life so much easier when developing a website.

我的鲸鱼太帅了 (0) - 2 years ago - Reply 0


Thank you very much) You helped me a lot)

Абылайхан Байдуллаев (0) - 2 years ago - Reply 0


Sure no problem.

我的鲸鱼太帅了 (0) - 2 years ago - Reply 0