"Accordion Menu"
Bootstrap 3.0.0 Snippet by SushantPimple

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="col-md-2"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFifteen"><span class="glyphicon glyphicon-file"> </span>My Wall</a> </h4> </div> <div id="collapseFifteen" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.showPost();'>View</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.showProfileposts();'>Users Post</a> </td> </tr> </table> </div> </div> </div> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUAPPROVER')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close"> </span>Approvals</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-pencil"></span><a href='javascript:com.coep.vtu.evaluation.fetchPendingClk()'>Pending</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-flash"></span><a href='javascript:com.coep.vtu.evaluation.fetchApprovedClk()'>Approved</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUTESTADMIN','VTUSTUD','VTUFACULTY')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th"> </span>Test</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUTESTADMIN')"> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.uploadTest();'>Configure</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.editViewTest()'>Edit</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.viewReportDetailsclk()'>View Report Details</a> </td> </tr> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSTUD')"> <tr> <td> <a href='javascript:com.coep.vtu.evaluation.selectTest()'>Select</a> </td> </tr> </s:authorize> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.getTest()'>View</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUTESTADMIN','VTUSTUD','VTUFACULTY')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-file"> </span>Remote Test</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUTESTADMIN')"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.configureRemoteClk();'>Configure</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.editRemoteClk()'>Edit</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-tasks"></span><a href='javascript:com.coep.vtu.evaluation.uploadRemoteClk()'>Upload</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-shopping-cart"></span><a href='javascript:com.coep.vtu.evaluation.deleteLabManualClk()'>Delete</a> </td> </tr> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSTUD')"> <tr> <td> <span class="glyphicon glyphicon-shopping-cart"></span><a href='javascript:com.coep.vtu.evaluation.getMyRTLinks()'>My Links</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-shopping-cart"></span><a href='javascript:com.coep.vtu.evaluation.viewRemoteClk()'>View</a> </td> </tr> </s:authorize> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUDOCUMENTUPLOADER','VTUSTUD','VTUDOCUMENTVERIFIER')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file"> </span>Study Material</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUDOCUMENTUPLOADER')"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.createTagsClk();'>Create</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.editRemoteClk()'>Upload</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-tasks"></span><a href='javascript:com.coep.vtu.evaluation.uploadStudyClk();'>Upload</a> </td> </tr> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUDOCUMENTVERIFIER')"> <tr> <td> <span class="glyphicon glyphicon-shopping-cart"></span><a href='javascript:com.coep.vtu.evaluation.verifyStudyMaterialClk();'>Verify</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-shopping-cart"></span><a href='javascript:com.coep.vtu.evaluation.cancelStudyMaterialClk();'>Cancel</a> </td> </tr> </s:authorize> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUDOCUMENTUPLOADER','VTUSTUD','VTUDOCUMENTVERIFIER')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-file"> </span>Downloads</a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.searchAllFilesClk();'>Search All</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.SearchByTagClk();'>Search by Tag</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUAUTH')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix"><span class="glyphicon glyphicon-file"> </span>Documents</a> </h4> </div> <div id="collapseSix" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.uploadDocumentClk();'>Upload</a> </td> </tr> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUDOCUMENTVERIFIER')"> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.verifyDocumentClk();'>Verify</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-tasks"></span><a href='javascript:com.coep.vtu.evaluation.cancelDocumentClk();'>Cancel</a> </td> </tr> </s:authorize> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUFACULTY')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseSeven"><span class="glyphicon glyphicon-file"> </span>Questions</a> </h4> </div> <div id="collapseSeven" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='../form/get/questionUploadExcelSheetFormat.xlsx'>Excel Format</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.uploadQuestions();'>Upload</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-tasks"></span><a href='javascript:com.coep.vtu.evaluation.editViewQuestions();'>View</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUAUTH')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseEight"><span class="glyphicon glyphicon-file"> </span>Course</a> </h4> </div> <div id="collapseEight" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUCOURSEADMIN')"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.createCourses();'>Create</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.updateCourse();'>Edit</a> </td> </tr> </s:authorize> <s:authorize access="hasAnyRole('VTUSTUD')"> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.selectcourse()'>Select</a> </td> </tr> </s:authorize> <tr> <td> <span class="glyphicon glyphicon-tasks"></span><a href='javascript:com.coep.vtu.evaluation.viewcourse()'>View</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUCOURSEADMIN','VTUFACULTY')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseNine"><span class="glyphicon glyphicon-file"> </span>Subject</a> </h4> </div> <div id="collapseNine" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUCOURSEADMIN')"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.createSubjects();'>Create</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.updateSubjects();'>Edit</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.assignSubjectClk();'>Assign Faculty</a> </td> </tr> </s:authorize> <tr> <td> <span class="glyphicon glyphicon-tasks"></span><a href='javascript:com.coep.vtu.evaluation.viewSubjectFacultyMappings();'>View</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUAUTH')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTen"><span class="glyphicon glyphicon-file"> </span>Message</a> </h4> </div> <div id="collapseTen" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.sendMsgClk()'>New</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.viewMsgClk()'>Inbox</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.sentMsgClk()'>Sent</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUPANELADMIN')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseEleven"><span class="glyphicon glyphicon-file"> </span>Resource Management</a> </h4> </div> <div id="collapseEleven" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.createResourceclk()'>Create</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.viewResourceclk()'>View</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUSTUD','VTUPANELADMIN','VTUSUPERSTUD')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve"><span class="glyphicon glyphicon-file"> </span>Slot</a> </h4> </div> <div id="collapseTwelve" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUPANELADMIN')"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.getAllResourceForCreateSlotclk()'>Create</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.getAllSlotForViewClk()'>View</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.getBlackListedClk()'>Black Listed</a> </td> </tr> </s:authorize> <s:authorize access="hasAnyRole('VTUSTUD','VTUSUPERSTUD')"> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.getallSlotsForBookclk()'>Book</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.getMySlotClk()'>MySlot</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.getMySlotHistoryClk()'>MySlot History</a> </td> </tr> </s:authorize> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.Calenderclk()'>Calendar</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUPANELADMIN')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThirteen"><span class="glyphicon glyphicon-file"> </span>Webinar</a> </h4> </div> <div id="collapseThirteen" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.renderRecordVideo()'>Record</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.renderPlayVideo()'>View</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.renderListForVerifyVideo()'>Verify</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.renderListForDenyVideo()'>Deny</a> </td> </tr> </table> </div> </div> </div> </s:authorize> <s:authorize access="hasAnyRole('VTUADMIN','VTUSUBADMIN','VTUPANELADMIN')"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFourteen"><span class="glyphicon glyphicon-file"> </span>Camera</a> </h4> </div> <div id="collapseFourteen" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.renderAddCamera()'>Add New</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href='javascript:com.coep.vtu.evaluation.getCameraListForModify()'>Modify</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href='javascript:com.coep.vtu.evaluation.getCameraListForDelete()'>Delete</a> </td> </tr> </table> </div> </div> </div> </s:authorize> </div> </div>
body{margin-top:50px;} .glyphicon { margin-right:10px; } .panel-body { padding:0px; } .panel-body .table {margin-bottom: 0px; }

Related: See More


Questions / Comments: