nabeel nader
asked on
collapse accordion not working when use Bootstrap and .net mvc ActionLink
when click actionlink the collapse go to the top menu
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>@Page.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
</head>
<body>
<!--Navbar Header-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
@*<a href="~/Home" class="navbar-brand">
<img src="~/images/Logotrans2.png" class="logo-size img-responsive pull-right" />
</a>*@
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="~/Home">
<span class="glyphicon glyphicon-home"></span>
الرئيسية
</a>
</li>
<li>
<a href="~/Home/About">
<span class="glyphicon glyphicon-info-sign"></span>
حول الموقع
</a>
</li>
<li>
<a href="~/Home/Contact">
<span class="glyphicon glyphicon-phone-alt"></span>
اتصل بنا
</a>
</li>
</ul>
<ul class="nav navbar-nav" style="float:left;">
<li>
<a href="#">
<span class="glyphicon glyphicon-envelope"></span>
البريد الداخلي
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-star"></span>
إشعارات
</a>
</li>
<li>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-off"></span>
خروج
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid w-screen mt-4">
<div class="row" style="min-height:400px;">
<div class="col-md-2 BgleftSide" style="margin-bottom:5px">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="button" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h4 class="panel-title">
المشاريع
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="menu-button0">@Html.ActionLink("اضافة مشروع ", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
<div class="menu-button0">@Html.ActionLink("عرض المشاريع", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="button" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h4 class="panel-title">
الجهات الخارجية
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="menu-button0">@Html.ActionLink("إضافة جهة ", "AddNewProvince", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
<div class="menu-button0">@Html.ActionLink("عرض الجهات", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
<div class="menu-button0">@Html.ActionLink("إضافة محافظه", "AddNewCenter", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
<div class="menu-button0">@Html.ActionLink("عرض محافظه", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
<div class="menu-button0">@Html.ActionLink("إضافة مركز", "AddNewCenter", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
<div class="menu-button0">@Html.ActionLink("عرض المراكز", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="button" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<h4 class="panel-title">
المقاولين
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="menu-button0">@Html.ActionLink("اضافة مقاول ", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
<div class="menu-button0">@Html.ActionLink("عرض المقاولين", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="button" id="headingFour" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h4 class="panel-title">
المستخدمين
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="menu-button0">@Html.ActionLink("اضافة مستخدم ", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
<div class="menu-button0">@Html.ActionLink("عرض المستخدمين", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="button" id="headingFive" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
<h4 class="panel-title">
التقارير
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="menu-button0">@Html.ActionLink("تقرير", "Index", "Home", null, new { @class = "btn btn-primary btn-block" })</div>
</div>
</div>
</div>
</div>
<div class="col-md-10">
@RenderBody()
</div>
</div>
</div>
<!--Footer-->
<footer class="myfooter">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>
<i class="glyphicon glyphicon-question-sign"></i>
من نحن؟
</h3>
<p>
السلام عليكم ورحمة الله وبركاته، تسعدنا زيارتكم لنا على في برنامج متابعة المشاريع التنموية في امارة تبوك .
</p>
</div>
<div class="col-md-4">
<h3>
<i class="glyphicon glyphicon-globe"></i>
روابط هامة
</h3>
<ul>
<li><a href="#">رابط الاول</a></li>
<li><a href="#">رابط الثاني</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>
<i class="glyphicon glyphicon-phone-alt"></i>
تواصل معنا
</h3>
<ul>
<li><a href="#">تابعنا على تويتر</a></li>
<li><a href="#">اترك لنا رسالة</a></li>
</ul>
</div>
</div>
</div>
<div class="subfooter">
<span>جميع الحقوق محفوظة تقنية المعلومات- @DateTime.Now.Year</span>
</div>
</footer>
@RenderSection("scripts", required: false)
</body>
</html>ASKER
i send the code in the attachment open at visual studio
when go to menu2 and click2 you see go to menu1
mvcCollapse.rar
when go to menu2 and click2 you see go to menu1
mvcCollapse.rar
ASKER
Please just post the rendered source.
Alternatively if you can provide a link to the site that would be better.
Unfortunately I can't use your VS files on my end.
Alternatively if you can provide a link to the site that would be better.
Unfortunately I can't use your VS files on my end.
ASKER
i don't have link online web site
ASP.NET MVC is accordion not working?
ASP.NET MVC is accordion not working?
Please can you post your rendered page.
Also, check your console (F12). Load your page and look for any errors when the page loads.
Look for any errors when you click the accordion
The reason the click is "jumping" to the top is that it is triggering a page reload.
This is either because
a) The click on the accordion is not being prevented with preventDefault() (on the click event)
b) There is a JavaScript error on page load that is causing some JavaScript to not load properly
c) There is a JavaScript error on click that is causing the click handler not to run
Also, check your console (F12). Load your page and look for any errors when the page loads.
Look for any errors when you click the accordion
The reason the click is "jumping" to the top is that it is triggering a page reload.
This is either because
a) The click on the accordion is not being prevented with preventDefault() (on the click event)
b) There is a JavaScript error on page load that is causing some JavaScript to not load properly
c) There is a JavaScript error on click that is causing the click handler not to run
ASKER
Looks like jquery might be blocked from loading.
Change your loading from
Change your loading from
<script src="http://www.my...><script src="//www.my...>This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
This could caused by a script error on the page (F12 and check your console)
Or
A library that is not loading.
Please post your rendered page (not the .net source) so we can have a look at what is being created
(View page source + copy + paste here)