Accordion

<!-- components/Accordion/genral-accordion.html --> <div class="genral-accordion"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="genral-accordion__heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a class="text-lg gray-900 bg-gray-50" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <span>Customize store design</span> <span class="badges badges-success"> Done <i class="icomoon-check ml-2"></i></span> </a> </h4> </div> <div id="collapseOne" class="panel-collapse bg-gray-50 collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="panel-body__action"> <p class="text-md gray-600">Choose one of our professionally designed, responsive templates Also, add your logo, colors, and images that reflects your brand.</p> <a href="#" class="base-btn secondary-gray-btn mb-2">Skip</a> <a href="#" class="base-btn mb-2">Customize Design</a> </div> <div class="panel-body__image"> <img src="atomic-core/img/customize-web.png"> </div> </div> </div> </div> <div class="panel panel-default"> <div class="genral-accordion__heading" role="tab" id="headingTwo"> <div class="genral-accordion__heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a class="collapsed text-lg gray-900 bg-gray-50" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <span> Add your first product</span> <span class="badges badges-gray"> Done <i class="icomoon-check ml-2"></i></span> </a> </h4> </div> </div> <div id="collapseTwo" class="panel-collapse bg-gray-50 collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <div class="panel-body__action"> <p class="text-md gray-600">Showcase your products and services to customers. You can add products one by one or using bulk import from an Excel sheet.</p> <a href="#" class="base-btn secondary-gray-btn mb-2">Skip</a> <a href="#" class="base-btn mb-2">Customize Design</a> </div> <div class="panel-body__image"> <img src="atomic-core/img/customize-web.png"> </div> </div> </div> </div> <div class="panel panel-default"> <div class="genral-accordion__heading" role="tab" id="headingTwo"> <div class="genral-accordion__heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a class="text-lg gray-900 bg-gray-50 collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> <span>Customize store design</span> <div class="panel-title__action"> <span class="base-btn link-gray-btn">skip</span> <span class="base-btn secondary-btn"> Add Domain </span> </div> </a> </h4> </div> </div> <div id="collapseThree" class="panel-collapse bg-gray-50 collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <div class="panel-body__action"> <p class="text-md gray-600">Give your store a unique domain to reach your customers You will get a free domain when you subscribe to one of our paid plans.</p> <a href="#" class="base-btn secondary-gray-btn mb-2">Skip</a> <a href="#" class="base-btn mb-2">Customize Design</a> </div> <div class="panel-body__image"> <img src="atomic-core/img/customize-web.png"> </div> </div> </div> </div> <div class="panel panel-default"> <div class="genral-accordion__heading" role="tab" id="headingTwo"> <div class="genral-accordion__heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a class="collapsed text-lg gray-900 bg-gray-50" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseTwo"> Give your customer a payment method </a> </h4> </div> </div> <div id="collapseFour" class="panel-collapse bg-gray-50 collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <div class="panel-body__action"> <p class="text-md gray-600">Setup how your customers pay for their orders. You can choose cash on delivery or provide online payment methods to get paid early.</p> <a href="#" class="base-btn secondary-gray-btn mb-2">Skip</a> <a href="#" class="base-btn mb-2">Customize Design</a> </div> <div class="panel-body__image"> <img src="atomic-core/img/customize-web.png"> </div> </div> </div> </div> <div class="panel panel-default"> <div class="genral-accordion__heading" role="tab" id="headingTwo"> <div class="genral-accordion__heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a class="collapsed text-lg gray-900 bg-gray-50" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseTwo"> Start shipping orders </a> </h4> </div> </div> <div id="collapseFive" class="panel-collapse bg-gray-50 collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <div class="panel-body__action"> <p class="text-md gray-600">Setup how your customers will receive their orders. You can set up your custom shipping rates or choose from a wide variety of third-party integrations we prepared for you!</p> <a href="#" class="base-btn secondary-gray-btn mb-2">Skip</a> <a href="#" class="base-btn mb-2">Customize Design</a> </div> <div class="panel-body__image"> <img src="atomic-core/img/customize-web.png"> </div> </div> </div> </div> </div> </div>