1
Answer

How to collapse and expand menu

Photo of Adhikar Patil

Adhikar Patil
7y
1.6k
1
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3. <title>Admin</title>  
  4. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />  
  5. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"  
  6. type="text/css" rel="Stylesheet" />  
  7. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  
  8. rel="Stylesheet" type="text/css" />  
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />  
  10. <link href="Css/Style.css" type="text/css" rel="Stylesheet" />  
  11. <%-- <link href="http://code.jquery.com/jquery-1.10.2.min.js" />--%>  
  12. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  
  13. <script type="text/javascript" language="javascript">  
  14. function CourseCheck() {  
  15. var aa = document.getElementById("collapseCourse");  
  16. alert('Hey div1 called !');  
  17. }  
  18. function check1() {  
  19. document.getElementById("collapseCourse").setAttribute("class", "panel-collapse collapse in divbgcolor");  
  20. return;  
  21. }  
  22. </script>  
  23. <script type="text/javascript">  
  24. window.onload = function () {  
  25. check1();  
  26. }  
  27. </script>  
  28. <style type="text/css">  
  29. .accordion ul li a:not(.collapsed) .rotate-icon  
  30. {  
  31. -webkit-transform: rotate(360deg);  
  32. -ms-transform: rotate(360deg);  
  33. transform: rotate(360deg);  
  34. }  
  35. .accordion .fa-angle-down  
  36. {  
  37. float: right;  
  38. }  
  39. .panel-collapse ul li a  
  40. {  
  41. color: Black !important;  
  42. }  
  43. .divbgcolor  
  44. {  
  45. background-color: #F1F1F1;  
  46. }  
  47. .panel-collapse ul li  
  48. {  
  49. padding-top: 10px;  
  50. padding-left: 20px;  
  51. border-bottom: solid 1px black;  
  52. padding-bottom: 10px;  
  53. }  
  54. .accordion ul  
  55. {  
  56. margin-bottom: 0px !important;  
  57. }  
  58. .pull-left  
  59. {  
  60. float: left;  
  61. }  
  62. .anchorclick  
  63. {  
  64. }  
  65. </style>  
  66. <asp:ContentPlaceHolder ID="head" runat="server">  
  67. </asp:ContentPlaceHolder>  
  68. </head>  
  69. <body>  
  70. <form id="form1" runat="server">  
  71. <div class="col-lg-2 noleftpadding">  
  72. <div class="leftbox">  
  73. <div class="lefttop">  
  74. <img src="Img/logo.png" />  
  75. </div>  
  76. <div class="Leftmenu">  
  77. <div class="accordion">  
  78. <ul class="list-unstyled">  
  79. <li><a href="Default.aspx"><i class="fa fa-dashboard"></i>Dashboard</a></li>  
  80. </ul>  
  81. <asp:Panel ID="pnlCourse" runat="server" Visible="false">  
  82. <ul class="list-unstyled">  
  83. <li><a data-toggle="collapse" data-parent="#accordion" href="#collapseCourse" id="colaps1"  
  84. runat="server" aria-expanded="false" aria-controls="collapseCourse">Manage Courses  
  85. <i class="fa fa-angle-down rotate-icon marginright20"></i></a></li>  
  86. </ul>  
  87. <div id="collapseCourse" class="panel-collapse collapse divbgcolor" runat="server">  
  88. <div>  
  89. <ul class="list-unstyled">  
  90. <li><a href="Manage-Course.aspx" class="anchorclick" id="mgCourse" runat="server"  
  91. onclick="return CourseCheck()"><i class="fa fa-edit"></i>Manage Courses</a></li>  
  92. <li><a href="Manage-Module.aspx" class="anchorclick"><i class="fa fa-briefcase"></i>  
  93. Manage Module</a></li>  
  94. <li><a href="Manage-Topic.aspx" class="anchorclick"><i class="fa fa-newspaper-o"></i>  
  95. Manage Topic</a></li>  
  96. <li><a href="Manage-Videos.aspx" class="anchorclick"><i class="fa fa-video-camera"></i>  
  97. Manage Videos</a></li>  
  98. <li><a href="Manage-Questions.aspx" class="anchorclick"><i class="fa fa-question-circle-o">  
  99. </i>Manage Questions</a></li>  
  100. <li><a href="Manage-Package.aspx" class="anchorclick"><i class="fa fa-question-circle-o">  
  101. </i>Manage Package</a></li>  
  102. <li><a href="Manage-Renewal.aspx" class="anchorclick"><i class="fa fa-recycle"></i>Manage  
  103. Renewal</a></li>  
  104. <li><a href="Referal-Program.aspx" class="anchorclick"><i class="fa fa-list"></i>Referal  
  105. Program</a></li>  
  106. </ul>  
  107. </div>  
  108. </div>  
  109. <ul class="list-unstyled">  
  110. <li><a data-toggle="collapse" data-parent="#accordion" href="#collapseContent" id="colaps2"  
  111. class="collapsed" aria-expanded="false" aria-controls="collapseContent" runat="server">  
  112. Manage Content <i class="fa fa-angle-down rotate-icon marginright20"></i></a>  
  113. </li>  
  114. </ul>  
  115. <div id="collapseContent" class="panel-collapse collapse divbgcolor" runat="server">  
  116. <div>  
  117. <ul class="list-unstyled">  
  118. <li><a href="Manage-FAQ.aspx" class="anchorclick"><i class="fa fa-question-circle-o">  
  119. </i>Manage FAQ</a></li>  
  120. <li><a href="Manage-Blog.aspx" class="anchorclick"><i class="fa fa-question-circle-o">  
  121. </i>Manage Blog</a></li>  
  122. <li><a href="Manage-Book.aspx" class="anchorclick"><i class="fa fa-question-circle-o">  
  123. </i>Manage Book</a></li>  
  124. </ul>  
  125. </div>  
  126. </div>  
  127. <ul class="list-unstyled">  
  128. <li><a href="Manage-User.aspx"><i class="fa fa-user"></i>Manage User</a></li>  
  129. </ul>  
  130. <ul class="list-unstyled">  
  131. <li><a href="Manage-Discount.aspx"><i class="fa fa-list"></i>Manage Discount</a></li>  
  132. </ul>  
  133. </asp:Panel>  
  134. <asp:Panel ID="pnlLMS" runat="server" Visible="false">  
  135. <ul class="list-unstyled">  
  136. <li><a data-toggle="collapse" data-parent="#accordion" href="#collapseLMS" id="colaps3"  
  137. class="collapsed" aria-expanded="false" aria-controls="collapseLMS" runat="server">  
  138. Manage LMS <i class="fa fa-angle-down rotate-icon marginright20"></i></a></li>  
  139. </ul>  
  140. <div id="collapseLMS" class="panel-collapse collapse divbgcolor" runat="server">  
  141. <div>  
  142. <ul class="list-unstyled">  
  143. <li><a href="Manage-LMSUser.aspx"><i class="fa fa-question-circle-o"></i>Manage LMS  
  144. </a></li>  
  145. <li><a href="EnquiryInformation.aspx"><i class="fa fa-question-circle-o"></i>Enquiry  
  146. Details</a></li>  
  147. <li><a href="CustomerInformation.aspx"><i class="fa fa-question-circle-o"></i>Book Purchase  
  148. Details</a></li>  
  149. <li><a href="UserInfo.aspx"><i class="fa fa-list"></i>Normal Student Info</a></li>  
  150. <li><a href="FranchiseStudentInfo.aspx"><i class="fa fa-list"></i>Franchise Student  
  151. Info</a></li>  
  152. <li><a href="FranchiseInfo.aspx"><i class="fa fa-list"></i>Franchise Info</a></li>  
  153. <li><a href="Promotions.aspx"><i class="fa fa-list"></i>Promotions</a></li>  
  154. </ul>  
  155. </div>  
  156. </div>  
  157. </asp:Panel>  
  158. <asp:Panel ID="pnlLicence" runat="server" Visible="false">  
  159. <ul class="list-unstyled">  
  160. <li><a href="ManageLicence.aspx"><i class="fa fa-id-card"></i>Manage Licence</a></li>  
  161. </ul>  
  162. <ul class="list-unstyled">  
  163. <li>  
  164. <asp:LinkButton ID="lnklogout" runat="server" OnClick="logout"><i class="fa fa-sign-out"></i> Logout</asp:LinkButton></li>  
  165. </ul>  
  166. </asp:Panel>  
  167. </div>  
  168. </div>  
  169. </div>  
  170. </div>  
  171. <div class="col-lg-10 norightpadding noleftpadding">  
  172. <div class="rightbox">  
  173. <div class="righttopbox">  
  174. </div>  
  175. <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
  176. </asp:ContentPlaceHolder>  
  177. </div>  
  178. </div>  
  179. </form>  
  180. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  181. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  182. </body>  
  183. </html>  
 
 
In the above two image when i click on manage course links like manage course, manage topics then i want always open the Manage Course Menu. When i click on Manage Content menu like Manage FAQ, Manage Blog then Manage Content Menu will be opened and other are collapse. So how this is possible using javascript. Menu is collapse on window.onload fuction. So how i solve this problem

Answers (1)

Next Recommended Forum