#StackBounty: #java #html #css #bootstrap-4 is there a way to prevent repeating code in html I'm using bootstrap 4 collapse like 20…

Bounty: 50

    <div class="card" style>
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria- 
expanded="true" aria-controls="collapseOne">
                          Collapsible Group Item #1
                      </button>
        </h5>
      </div>
      <!-- Add mx-auto -->
      <div id="collapseOne" class="collapse show text-center mx-auto" aria-labelledby="headingOne" 
 style="width:300px;">
        <div class="card-body">
          <div class="card">
            <div class="card-header text-center" id="headingTwo" style="width:300px;">
              <h5 class="mb-0">
                <button class="btn btn-link collapsed text-center" data- toggle="collapse" data- 
   target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="width:300px;">
                                      Collapsible Group Item #2
                                  </button>
              </h5>
            </div>
            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
              <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus wolf moon put a 
                craft beer sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings farm-
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data- target="#collapseThree" 
 aria-expanded="false" aria-controls="collapseThree">
                          Collapsible Group Item #3
                      </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
        <div class="card-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry wolf moon 
          et. Nihil anim keffiyeh helvetica, craft beer labore wes sapiente ea proident. Ad vegan 
        </div>
      </div>
    </div>
  </div>

Hello I have been copying and pasting this like 10-20 times on my code changing the id the header id and the button. I also had been copying and pasting a bunch of other html code (image tag about 20 images) I was wondering if there was a way to stop repeating code (like a function) with pure html css. If not can you do it with plain vanilla js? if not then what are the other ways?

In short

Most important question (A is most important C is least)

  • A) is there a way to prevent repeating code with the collapse code
    above with just pure HTML/CSS? if yes how?
  • B) is there a way to prevent repeating code with the collapse code
    above with just pure HTML/CSS/vanilla js? if yes how?
  • C) is there a way to prevent repeating code with the collapse code
    above with just pure HTML/CSS/angular/react? if yes how?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.