fbpx

Astroid 2.4 Landed with Joomla 4 Compatibility Download Now

Welcome, Guest
Username: Password: Remember me

TOPIC: Is it easy to get FAQ like some other templates?

Is it easy to get FAQ like some other templates? 1 year 4 months ago #14240

Hello internet friends,

I have added bootstrap accordion option to article on my site. It looks very....boring :D
Can i find the documentation on how to add FAQ accordion option (maybe like coax template) to this template?
I hope it is as easy as copy certain lines of scss from coax to fitness customcss and use btn class?
Please let me know :)
Thank you!
The administrator has disabled public write access.

Is it easy to get FAQ like some other templates? 1 year 4 months ago #14242

  • nishtha
  • nishtha's Avatar
  • Offline
  • Moderator
  • Posts: 1269
  • Thank you received: 123
  • Karma: 16
Hi,

Here's the code:
<div class="row">
      <div class="col-lg-6">
         <div class="accordion" id="accordionExample">
            <div class="card shadow">
               <div class="card-header" id="headingOne">
                  <h5 class="mb-0">
                     <button class="btn btn-link w-100" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <div class="d-flex justify-content-between"><span>Why Is Coax FAQ So Famous?</span> <i class="fas fa-plus  text-right"></i></div>
                     </button>
                  </h5>
               </div>
               <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                  <div class="card-body">
                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </div>
               </div>
            </div>
            <div class="card shadow">
               <div class="card-header" id="headingTwo">
                  <h5 class="mb-0">
                     <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <div class="d-flex justify-content-between"><span>Seven Easy Rules Of Coax FAQ.</span><i class="fas fa-plus  text-right"></i></div>
                     </button>
                  </h5>
               </div>
               <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                  <div class="card-body">
                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </div>
               </div>
            </div>
            <div class="card shadow">
               <div class="card-header" id="headingThree">
                  <h5 class="mb-0">
                     <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <div class="d-flex justify-content-between"><span>Top Five Sites You Can Learn Coax FAQ For Free!</span><i class="fas fa-plus  text-right"></i></div>
                     </button>
                  </h5>
               </div>
               <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                  <div class="card-body">
                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </div>
               </div>
            </div>
            <div class="card shadow">
               <div class="card-header" id="headingFour">
                  <h5 class="mb-0">
                     <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                        <div class="d-flex justify-content-between"><span>5 Important Facts That You Should Know About Coax FAQ.</span><i class="fas fa-plus  text-right"></i></div>
                     </button>
                  </h5>
               </div>
               <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
                  <div class="card-body">
                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </div>
               </div>
            </div>
            <div class="card shadow">
               <div class="card-header" id="headingFive">
                  <h5 class="mb-0">
                     <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                        <div class="d-flex justify-content-between"><span>15 Basic Tools You Will Need To Learn Coax FAQ.</span><i class="fas fa-plus  text-right"></i></div>
                     </button>
                  </h5>
               </div>
               <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
                  <div class="card-body">
                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </div>
               </div>
            </div>
            <div class="card shadow">
               <div class="card-header" id="headingSix">
                  <h5 class="mb-0">
                     <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                        <div class="d-flex justify-content-between"><span>Seven Secrets That Experts Of Coax FAQ Don't Want You To Know.</span><i class="fas fa-plus  text-right"></i></div>
                     </button>
                  </h5>
               </div>
               <div id="collapseSix" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
                  <div class="card-body">
                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-6 mt-lg-0 mt-4">
		<div class="accordion" id="accordionExample_one">
			 <div class="card shadow">
				<div class="card-header" id="headingEight">
				   <h5 class="mb-0">
					  <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
						 <div class="d-flex justify-content-between"><span>Seven Tips To Avoid Failure In Coax FAQ.</span><i class="fas fa-plus  text-right"></i></div>
					  </button>
				   </h5>
				</div>
				<div id="collapseEight" class="collapse show" aria-labelledby="headingEight" data-parent="#accordionExample_one">
				   <div class="card-body">
					  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				   </div>
				</div>
			 </div>
			 <div class="card shadow">
				<div class="card-header" id="headingNine">
				   <h5 class="mb-0">
					  <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
						 <div class="d-flex justify-content-between"><span>5 Quick Tips For Coax FAQ.</span><i class="fas fa-plus  text-right"></i></div>
					  </button>
				   </h5>
				</div>
				<div id="collapseNine" class="collapse" aria-labelledby="headingNine" data-parent="#accordionExample_one">
				   <div class="card-body">
					  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				   </div>
				</div>
			 </div>
			 <div class="card shadow">
				<div class="card-header" id="headingTen">
				   <h5 class="mb-0">
					  <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseTen" aria-expanded="false" aria-controls="collapseTen">
						 <div class="d-flex justify-content-between"><span>How Coax FAQ Is Going To Change Your Business Strategies.</span><i class="fas fa-plus  text-right"></i></div>
					  </button>
				   </h5>
				</div>
				<div id="collapseTen" class="collapse" aria-labelledby="headingTen" data-parent="#accordionExample_one">
				   <div class="card-body">
					  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				   </div>
				</div>
			 </div>
			 <div class="card shadow">
				<div class="card-header" id="headingEleven">
				   <h5 class="mb-0">
					  <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseEleven" aria-expanded="false" aria-controls="collapseEleven">
						 <div class="d-flex justify-content-between"><span>Here's What People Are Saying About Coax FAQ.</span><i class="fas fa-plus  text-right"></i></div>
					  </button>
				   </h5>
				</div>
				<div id="collapseEleven" class="collapse" aria-labelledby="headingEleven" data-parent="#accordionExample_one">
				   <div class="card-body">
					  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				   </div>
				</div>
			 </div>
			 <div class="card shadow">
				<div class="card-header" id="headingTweleve">
				   <h5 class="mb-0">
					  <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseTweleve" aria-expanded="false" aria-controls="collapseTweleve">
						 <div class="d-flex justify-content-between"><span>7 Reasons Why People Like Coax FAQ.</span><i class="fas fa-plus  text-right"></i></div>
					  </button>
				   </h5>
				</div>
				<div id="collapseTweleve" class="collapse" aria-labelledby="headingTweleve" data-parent="#accordionExample_one">
				   <div class="card-body">
					  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				   </div>
				</div>
			 </div>
			 <div class="card shadow">
				<div class="card-header" id="headingThirteen">
				   <h5 class="mb-0">
					  <button class="btn btn-link w-100 collapsed" type="button" data-toggle="collapse" data-target="#collapseThirteen" aria-expanded="false" aria-controls="collapseThirteen">
						 <div class="d-flex justify-content-between"><span>Eliminate Your Fears And Doubts About Coax FAQ.</span><i class="fas fa-plus  text-right"></i></div>
					  </button>
				   </h5>
				</div>
				<div id="collapseThirteen" class="collapse" aria-labelledby="headingThirteen" data-parent="#accordionExample_one">
				   <div class="card-body">
					  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				   </div>
				</div>
			 </div>
		  </div>
	  </div>
   </div>

Add this code and you work will be done!
Let us know if you still face any issue.

Thanks,
Nishtha
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.284 seconds
Cron Job Starts