Bootstrap手风琴

效果图

代码

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous">			</script>
	<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.8.1/bootstrap-table-all.js"></script>

	<div class="row" style="margin-bottom: 260px"><!---手风琴开始--->

		<div class="col-lg-12">
		    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">	<!---手风琴/panel-group/开始--->							
		       
		        <div class="panel panel-default"><!---手风琴/tissue-based/start--->
		            <div class="panel-heading" role="tab" id="headingOne">
		                <h4 class="panel-title">
		                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
								Search accessible chromatin region by TF
							</a>
		                </h4>
		            </div>
		            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
		                <div class="panel-body">
							<div class="col-lg-6">
								<form method="get" enctype="multipart/form-data" target="_blank" action="search/search_tf_result.html">
									<div class="form-group">
										<label>Species Name</label>
										<select class="form-control" name="search_species_byTF" id="search_species_byTF">
											<option value='' style="color: lightgray">Please choose &nbsp;&nbsp;&nbsp;eg:Arabidopsis thaliana</option>
										</select>
									</div>
									<div class="form-group">
										<label>TF Name</label>
<!--										<input type="text" class="form-control" name="search_name_byTF" id="search_name_byTF" placeholder="TF name  eg:AT1G69560.1">-->
											<select class="form-control" name="search_name_byTF" id="search_name_byTF" >
												<option style="color: lightgray" >Please choose</option>
											</select>
									</div>
									<button type="button" class="btn btn-default" style="background-color: #A5C6B5;" onclick="window.open('search/search_tf_result.html?species='+search_species_byTF.value+'&name='+search_name_byTF.value)" ><font color="white" size="3"><strong>Start search</strong></font></button>
									<button type="Reset" class="btn btn-default" style="background-color: #A5C6B5;"><font color="white" size="3"><strong>Reset</strong></font></button>
<!--									<a onclick="search_TF_select();" class="btn btn-default" style="background-color: #A5C6B5;"><font color="white" size="3"><strong>For example</strong></font></a><br>-->
								</form>

							</div>
							<div class="col-lg-6">
								<div id="container" class="box" style="height:320px;width: 100%;border: 1px solid rgba(34,36,38,.15);padding: 15px;border-radius:5px;">
									<div style="font-size: 110%;text-align: justify;margin-top: 8px">
										<p><strong style="color: #00785a;">Introduction:</strong><br><br>
											You can submit a TF name for query after selecting species, then PlantCADB can provide you the Sample ID and sequence that binds to the TF. PlantCADB used two methods to identify transcription factor binding sites, one is footprint analysis, and the other is motif scanning analysis. Among them, we only analyze the footprints of ATAC-seq and DNase-seq data. As some species currently do not have motif or gene annotation files, we will supplement the information of the database timely in the future.										</p>

									</div>
								</div>
							</div>	
						</div>
		            </div>
		        </div><!---手风琴/tissue-based/end--->