0

In following HTML page, the Heading 1 and Heading 2 rightly collapse when page loads first time (since I'm using class="panel-collapse collapse". Then Collapse/Expand works fine when user clicks on a Heading. But when a user clicks on a link inside a Heading under one heading, the heading collapses. I want it to stay it open when a link inside Heading is clicked. The Collapse/Expand behavior should only occur when user clicks on a Heading and not on clicking a link inside a Heading. I would prefer a solution wihtout using JavaSctipt. NOTE: I'm using it in an ASP.NET Core project with Bootstrap 3.0 - but that should not matter.

<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" href="#ToolsID">Heading 1</a>
            </h4>
        </div>
        <div class="panel-collapse collapse" id="ToolsID">
            <div class="list-group">
                <a asp-controller="TestCtrl" asp-action="TestAction" class="list-group-item">Click Here</a>
                <a href="#" class="list-group-item">Click Here</a>
            </div>
        </div>
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" href="#ReportsID">Heading 2</a>
            </h4>
        </div>
        <div class="panel-collapse collapse" id="ReportsID">
            <div class="list-group">
                <a href="#" class="list-group-item">Click Here </a>
                <a href="#" class="list-group-item">Click Here</a>
            </div>
        </div>
    </div>
</div>

UPDATE

The Source View html in the browser looks as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ASP.NET Core Test App</title>    
        <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="/css/site.css" />   
</head>
<body>
    <div class="container navbar navbar-inverse navbar-fixed-top text-center">
        <img src="/images/nps.gif"><img src="/images/nps_txt.gif">
    </div>
    <div class="container nav nav-pills" style="margin-top:4px;background-color:cornsilk;">

The same content as in the <div class="panel-group">....</div> shown in the post example above

<script src="/lib/jquery/dist/jquery.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>

 <script>
   $('.list-group-item').click(function(e){ 
        e.stopPropagation();
    })
</script>
</body>
</html>
nam
  • 21,967
  • 37
  • 158
  • 332
  • `$('.list-group-item').click(function(){ return false;})`. It will prevent bubling events – Taras Kumpanenko Aug 09 '16 at 17:59
  • @nam I can't reproduce the described behaviour. I've copied you're html snippet in a freshly created project and it collapes like it should. Do you use any other javascript libs (beside what comes with the standard template)? What else is in the view? – ypsilo0n Aug 09 '16 at 21:35
  • @ypsilo0n Yes, it collapses when you click on `Heading 1` or `Heading 2` but it also collapses when you click on a link inside these headings. I do not want it to collapse when clicking the links inside these headings. I've just added an **UPDATE** section that shows the source view of the html page; that my help you diagnose the problem. – nam Aug 09 '16 at 23:03
  • @TarasKumpanenko Thank you for trying to help. Your code does not work on the first time click on the child link. But it works on the subsequent clicks on the same child link. That is, it still collapses when you click on a child link first time but it does not collapses when you click on the same child link the second time or thereafter. It may have something to do with page re-loading when you click the child link the first time and I do want it to collapse on the page load. – nam Aug 09 '16 at 23:27

1 Answers1

0

Your HTML seems correct. If the version of Bootstrap you're using has binded the event listeners in a way that it's triggering it even when you click inside an anchor, you'll need to add your own JavaScript I'm afraid.

$('.list-group-item').click(function(e){ 
  e.stopPropagation();
})

Should work as per your needs.

Juan Ferreras
  • 2,801
  • 2
  • 13
  • 16
  • Thank you for trying to help. Your suggestion does not work. I've added an **UPDATE** to my original post that shows the 'Source View' of the html. That may help in diagnosing the cause of the error. – nam Aug 10 '16 at 15:13