Now that we know how we can toggle the visibility of elements, we can go ahead and create our very own accordion. To this end, let's reuse the example from the previous subsection, but make the following adjustments:

1. We replicate the Toggle my content button so that it shows above each div containing our content.
2. We remove the last, hidden, div to keep the example simple.
3. We replace the data-mycontent="showme" with data-accordion="1" and data-accordion="2" respectively.
4. We update the toggle button's data-target attributes to point to the accordion IDs.
5. Assign to give the first content div the bg-primary class to allow us to differentiate between the two content areas.

<div>
  <div>
    <button
      class="btn btn-success"
      data-target="[data-accordion='1']"
      data-toggle="collapse">
        Toggle my content 1
    </button>
    <div data-accordion="1" class="collapse bg-primary text-light m-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
  </div>
  <div>
    <button
      class="btn btn-success"
      data-target="[data-accordion='2']"
      data-toggle="collapse">
        Toggle my content 2
      </button>
    <div data-accordion="2" class="collapse bg-secondary text-light m-
                                                                  1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
  </div>
</div>

Running this example, you will now see that by clicking on each button, the primary and secondary content will become visible or invisible (refer to the following figure):

This, however, is not the behavior that we would expect from an accordion, as an accordion ever only shows one content area at a time. To this end, let's continue working on our example. First, we should apply the show class alongside the collapse class of your primary content area. This merely ensures that the content is visible. Therefore, when first loading the page, the primary content area will be visible, while the secondary content area will be invisible.

Next, we want the primary content area to become invisible when the secondary content area is toggled, and vice versa. To this end, what we must do is make use of the data-children and data-parent attributes. As their names imply, these two attributes are used to denote the parent of a given element and the children within a given element. Since both attributes accept jQuery selectors, we can denote the parent of both the primary and secondary content area using data-parent=".accordion-parent". Of course, in order for this to work, we must assign the accordion-parent class name to the accordion root:

<div class="accordion-parent">
     <div>
         <button
             data-parent=".accordion-parent"
             class="btn btn-success"
             data-target="[data-accordion='1']"
             data-toggle="collapse">
             Toggle my content 1
         </button>
         <div data-accordion="1" class="collapse show bg-primary text-
         light m-1">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit
         </div>
     </div>
     <div>
         <button
             data-parent=".accordion-parent"
             class="btn btn-success"
             data-target="[data-accordion='2']"
             data-toggle="collapse">
             Toggle my content 2
         </button>
     <div data-accordion="2" class="collapse bg-secondary text-light m-
      1">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit
     </div>
 </div>
</div>

Last but not least, we must denote the children by adding data-children="[data-parent]" to the accordion root:

<div class="accordion-parent" data-children=".accordion-child">
  <div class="accordion-child">
    <button
      data-parent=".accordion-parent"
      class="btn btn-success"
      data-target="[data-accordion='1']"
      data-toggle="collapse">
        Toggle my content 1
    </button>
    <div data-accordion="1" class="collapse show bg-primary text-light 
    m-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
  </div>
  <div class="accordion-child">
    <button
      data-parent=".accordion-parent"
      class="btn btn-success"
      data-target="[data-accordion='2']"
      data-toggle="collapse">
        Toggle my content 2
      </button>
    <div data-accordion="2" class="collapse bg-secondary text-light m-
    1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
  </div>
</div>