Accordion Menu
An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. You can add almost any content under the menu.
The following example shows how to add images, paragraphs, and tables. Access Privileges uses this feature.
fdafd fdafdas f
Replace these texts: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
| ID Required | UMD Student ID |
| Loan Period | Up to 12 Weeks |
To get started, copy and paste the following code to <> Source view:
<div class="panel-group" id="accordion" style="width:100%">
<!-- start the panel group -->
<!-- ----------- the 1st panel --------------- -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse1">Heading link 1 </a></h4>
</div>
<div class="panel-collapse collapse" id="collapse1">
<div class="panel-body">
<!-- ---------- Add your content here ---------->
<img data-facetselect="greenoffice.png/{_document}/hippogallery:original" data-type="hippogallery:original" data-uuid="a042e609-ea7f-45b7-8ca9-57e35b848132" src="binaries/content/gallery/public/sample/greenoffice.png/greenoffice.png/hippogallery:original" /><br />
fdafd fdafdas f
</div> <!-- end of panel body -->
</div> <!-- end of panel-collapse -->
</div> <!-- end of panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse2">Heading link 2</a></h4>
</div>
<div class="panel-collapse collapse" id="collapse2">
<div class="panel-body">
<p>Replace these texts: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
<p>similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum</p>
</div> <!-- end of panel body -->
</div> <!-- end of panel-collapse -->
</div> <!-- end of panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse3">Heading link 3</a></h4>
</div>
<div class="panel-collapse collapse" id="collapse3">
<div class="panel-body">
<table border="1" class="table table-bordered" width="100%">
<tbody>
<tr>
<td><a href="http://www.umd.edu">ID Required</a></td>
<td>UMD Student ID</td>
</tr>
<tr>
<td>Loan Period</td>
<td>Up to 12 Weeks</td>
</tr>
</tbody>
</table>
</div> <!-- end of panel body -->
</div> <!-- end of panel-collapse -->
</div> <!-- end of panel 3 -->
</div> <!-- end of panel group -->