Question 35941 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Stop accordion from expanding when More button is clicked – Jquery

When the More button is clicked, it should NOT expand and collapse.

enter image description here

If the accordion initial state is open, it must stay open even if button is clicked, if initial state is collapsed then after the more button the accordion should not expand.

This means clicking the more button should not have any effect on the accordion.

<html>

<head>
    <style>
        .accordion {
            margin: 30px;
        }

        .accordion-button.collapsed {
            border-bottom: #ccc 1px solid
        }

        .accordion-body {
            border-left: #673ab744 1px solid;
            border-bottom: #673ab744 1px solid;
            border-right: #673ab744 1px solid
        }

        .accordion-button {
            display: inline !important
        }

        .flx-row {
            display: flex;
            justify-content: space-between;
        }

        .card-header-custom {
            display: flex;
            justify-content: space-between;
        }
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>

<body>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">

    <div class="card accordion-flush" id="accordionFlushExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">

                    <div class="flx-row">
                        <div>
                            Hello World
                        </div>
                        <div id="abc">
                        </div>
                    </div>
                    <span class="text-secondary">Desc goes here</span>
                </button>


            </h2>
            <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
            </div>
        </div>
        
        
        
        
        
        
        
        
        
        
        
        
        <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                    Accordion Item #2
                </button>
            </h2>
            <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
            </div>
        </div>
    </div>

    <div class="as-console-wrapper">
        <div class="as-console"></div>
    </div>
    <script type="text/javascript">
        $(".wdelete")
            .off()
            .on('click', function(event) {
                if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev().val()}?`) == true) {
                    $(this)
                        .closest('.accordion-item')
                        .remove();
                }
                event.preventDefault();
                event.stopPropagation();
            });
            
            
            $("#abc").html(`<div class="btn-group">
            <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button>
            <ul class="dropdown-menu dropdown-menu-lg-end" style="">
                <li><a class="dropdown-item" href="#">Click me</a></li>
                <li><a class="dropdown-item" href="#">Hello me</a></li>
                <li><a class="dropdown-item tdelete" href="#">Justify me</a></li>
            </ul>
        </div>`)

            
    </script>

    <div class="as-console-wrapper">
        <div class="as-console"></div>
    </div>
    <div class="as-console-wrapper">
        <div class="as-console"></div>
    </div>
</body>

</html>
Tags:

2

Answers


  1. 0 
    I find that your More dropdown is inserted in the accordion button due to which you find the issue of accordion open/close when more dropdown get clicked.

In the below link, I have modified your code little bit where I have adjusted HTML, CSS and added 2 lines of jQuery which will be global for your HTML structure. Please refer below link:

    Click Here

    Login or Signup to reply.
  2. 0

    Your code is not working because you have a button that triggers the accordion and inside that button you have your div "More". So when you click the "More" it also triggers the accordion. You need to put your "More" button outside the first accordion button.

    Also add this .accordion-button.collapsed + div#abc to your CSS at line 6.

    Something like this:

    $(".wdelete")
  .off()
  .on('click', function(event) {
    if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev().val()}?`) == true) {
      $(this)
        .closest('.accordion-item')
        .remove();
    }
    event.preventDefault();
    event.stopPropagation();
  });


$("#abc").html(`<div class="btn-group">
            <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button>
            <ul class="dropdown-menu dropdown-menu-lg-end" style="">
                <li><a class="dropdown-item" href="#">Click me</a></li>
                <li><a class="dropdown-item" href="#">Hello me</a></li>
                <li><a class="dropdown-item tdelete" href="#">Justify me</a></li>
            </ul>
        </div>`)
    .accordion {
  margin: 30px;
}

.accordion-button.collapsed,
.accordion-button.collapsed + div#abc {
  border-bottom: #ccc 1px solid;
}

.accordion-body {
  border-left: #673ab744 1px solid;
  border-bottom: #673ab744 1px solid;
  border-right: #673ab744 1px solid;
}

.accordion-button {
  display: inline !important;
}

.flx-row {
  display: flex;
  justify-content: space-between;
}

.card-header-custom {
  display: flex;
  justify-content: space-between;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">

<div class="card accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <div class="flx-row">

        <!-- This block is your button that triggers the first accordion, notice the "data-bs-target" -->
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
          <div>Hello World</div>
          <span class="text-secondary">Desc goes here</span>
        </button>

        <!-- This is where your "More" button gets rendered, outside of <button> -->
        <div id="abc"></div>

      </div>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.
      </div>
    </div>
  </div>
</div>

<div class="as-console-wrapper">
  <div class="as-console"></div>
</div>


<div class="as-console-wrapper">
  <div class="as-console"></div>
</div>
<div class="as-console-wrapper">
  <div class="as-console"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search