"Accordion with images"
Bootstrap 3.2.0 Snippet by Esteban_Quiebre

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <form action="/update" id="formwrite"> <div class="panel-group secondary-bridge container" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title va-middle"> <img src='https://tintasytoners.cl/wp-content/uploads/2020/10/N0_1_off_300x150_mobile.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne"> </h4> </div> <div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-default"> <div class="panel-heading"> Tab 1 </div> </div> </div> </div> <div class="panel2"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title va-middle"> <img src='https://tintasytoners.cl/wp-content/uploads/2020/10/N0_2_off_300x150_mobile.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeTwo" aria-expanded="true" aria-controls="collaspeTwo"> </h4> </div> <div id="collaspeTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-default"> <div class="panel-heading"> Tab 2 </div> </div> </div> </div> <div class="panel3"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title va-middle"> <img src='https://tintasytoners.cl/wp-content/uploads/2020/10/N0_3_off_300x150_mobile.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeThree" aria-expanded="true" aria-controls="collaspeThree"> </h4> </div> <div id="collaspeThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-default"> <div class="panel-heading"> Tab 3 </div> </div> </div> </div> </div> </form> </body>
.container { width: 75%; } .head { background: #D9DBDE; } .panel-heading { background-color: #D9DBDE; padding: 20px; margin-bottom: 10px; border-radius: 0; } .panel-title { font-size: 21px; display: block; width: 100%; color: #4F5858; line-height: 1.3; font-weight: normal; } .panel-icon { width: 250px; }
$('.panel').on('shown.bs.collapse', function(e) { $(this).find(".panel-icon").attr('src', 'https://tintasytoners.cl/wp-content/uploads/2020/10/N0_1_on_300x150_mobile.png'); }); $('.panel').on('hidden.bs.collapse', function(e) { $(this).find(".panel-icon").attr('src', 'https://tintasytoners.cl/wp-content/uploads/2020/10/N0_1_off_300x150_mobile.png'); }); $('.panel2').on('shown.bs.collapse', function(e) { $(this).find(".panel-icon").attr('src', 'https://tintasytoners.cl/wp-content/uploads/2020/10/N0_2_on_300x150_mobile.png'); }); $('.panel2').on('hidden.bs.collapse', function(e) { $(this).find(".panel-icon").attr('src', 'https://tintasytoners.cl/wp-content/uploads/2020/10/N0_2_off_300x150_mobile.png'); }); $('.panel3').on('shown.bs.collapse', function(e) { $(this).find(".panel-icon").attr('src', 'https://tintasytoners.cl/wp-content/uploads/2020/10/N0_3_on_300x150_mobile.png'); }); $('.panel3').on('hidden.bs.collapse', function(e) { $(this).find(".panel-icon").attr('src', 'https://tintasytoners.cl/wp-content/uploads/2020/10/N0_3_off_300x150_mobile.png'); });

Related: See More

Argon Design System
Lazy Loading Images with placeholders
Bootstrap Images to Left and Right with Text and Heading
Tabs and accordion collaboration

Questions / Comments: