Expand and collapse does not work completely

[newcoder1010]

Hello,

I have two columns using bootstrap classes. I have 5 element each column. Left column expands collapse just fine. That means only one element can be expanded at once. But right column, it allows multiple elements to be expanded at once. How can I allow only one element to be expanded at once for all the elements? Thanks.

 

https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

 

 <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
 

<div class = "col-lg-6 col-md-6 col-sm-6 col-xs-12">

 
 <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="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse ">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Collapsible Group 4</a>
        </h4>
      </div>
      <div id="collapse4" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>


    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Collapsible Group 5</a>
        </h4>
      </div>
      <div id="collapse5" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>


  </div> 

</div>


<div class = "col-lg-6 col-md-6 col-sm-6 col-xs-12">

 
 <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="#collapse6">Collapsible Group 6</a>
        </h4>
      </div>
      <div id="collapse6" class="panel-collapse collapse ">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse7">Collapsible Group 7</a>
        </h4>
      </div>
      <div id="collapse7" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse8">Collapsible Group 8</a>
        </h4>
      </div>
      <div id="collapse8" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Collapsible Group 9</a>
        </h4>
      </div>
      <div id="collapse9" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>


    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse10">Collapsible Group 10</a>
        </h4>
      </div>
      <div id="collapse10" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>



  </div> 

</div>

 

[dsonesuk]

You can only use a unique id references within a page, you have two "accordion" id, change one to something different then change child element 'data-parent'  custom attribute value  to reflect this changed id reference.

[newcoder1010]

I will try it. I am trying to create questions and answers which can be expandable and collapsible. Is there better way to do it?

 

Thanks.

[newcoder1010]

I tried this but did not work. I am trying to put them in two columns. Only one can be expanded at once but multiple being expanded. Can you please provide me a sample code to do it?

 

<!DOCTYPE html>

<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

 

<div class="container">

  <h2>Accordion Example</h2>

  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>

 

  <div class="panel-group" id="accordion1">

  

    <div class = "col-lg-6 col-md-6">

 

 

    <div class="panel panel-default">

      <div class="panel-heading">

        <h4 class="panel-title">

          <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">Collapsible Group 1</a>

        </h4>

      </div>

      <div id="collapse1" class="panel-collapse collapse ">

        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

      </div>

    </div>

 

 

    <div class="panel panel-default">

      <div class="panel-heading">

        <h4 class="panel-title">

          <a data-toggle="collapse" data-parent="#accordion1" href="#collapse2">Collapsible Group 2</a>

        </h4>

      </div>

      <div id="collapse2" class="panel-collapse collapse">

        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

      </div>

    </div>

 

 

  </div> 

 

  </div> 

 

  <div class="panel-group" id="accordion2">

 <div class = "col-lg-6 col-md-6">

 

    <div class="panel panel-default">

      <div class="panel-heading">

        <h4 class="panel-title">

          <a data-toggle="collapse" data-parent="#accordion2" href="#collapse3">Collapsible Group 3</a>

        </h4>

      </div>

      <div id="collapse3" class="panel-collapse collapse ">

        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

      </div>

    </div>

 

    <div class="panel panel-default">

      <div class="panel-heading">

        <h4 class="panel-title">

          <a data-toggle="collapse" data-parent="#accordion2" href="#collapse4">Collapsible Group 4</a>

        </h4>

      </div>

      <div id="collapse4" class="panel-collapse collapse">

        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

      </div>

    </div>

 

</div>

 

</div>

   </div>    

</body>

</html>

 

 

 

Edited December 11, 2017 by newcoder1010

[dsonesuk]

By adding column width class element within the id 'accordionN', you are probably messed up it transitioning down to the correct element to toggle the hide and show of those elements. Move it outside the parent accordion id referenced elements.

[newcoder1010]

If I put accordion outside column class, it works within the column. But I need to be able to do it in both column.

That means it allows me to expand two elements at once. One element from each column. I guess it is because each column has its own parent. How can I have same parent for both columns so two columns can have most one element expanded?

[dsonesuk]

Well as far as I know it does exactly that, the col class element is placed outside each the accordion id parent elements, within container class. Only one can be open at one time in each column, non of the toggle trigger events affect the other columns element, be they opened or closed.