Is it possible that couchcms can add new FAQ;s in this style or edit existing ones

The url is https://www.recycleyourtec.com/faqs.php

The coding is below

Code: Select all

<?php

$title = "Faq's";

include ( 'includes/header.php' );
?>

 <!-- Intro Section -->
  <section class="inner-intro bg-img light-color overlay-before parallax-background" data-stellar-background-ratio="0.5">
    <div class="container">
      <div class="row title">
        <h1 data-title="History"><span>FAQ's</span></h1>
      </div>
    </div>
  </section>
  <!-- Intro Section -->
  <div class="faq padding pt-xs-40">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-lg-12">
          <div class="block-title v-line mb-35">
            <h2>Frequently Asked Questions</h2>
            <p class="italic">
            
            </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 anim-section mb-30">
          <div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          How does the service work? <i class="fa fa-plus collape-plus"></i>
        </a>
      </h5>
    </div>
    <div id="collapseOne" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        <p>
        We pride ourselves on providing a simple yet highly effective service, in 3 simple steps.
      <br />
      1. Collect up all your used technology, be it from a School, Charity or a Business and Call or email your dedicated contact for a FREE no hassle, no pressure quotation.
      <br />
        2. Book a convenient courier collection ( Depending on number of items for recycling ) Free postage service available too. 
      <br />
        3. Await for your payment.
        </p>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Is the service free to use? <i class="fa fa-plus collape-plus"></i>
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        <p>
        100%, at no time we will EVER charge you for any part of our first class services, while providing but not limited to the below.
      <br />
        Quotation
        <br />
        Collection
        <br />
        Postage 
        <br />
        Data wiping
        <br />
        Certification 
        </p>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Do I need to erase my device before sending to you? <i class="fa fa-plus collape-plus"></i>
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingThree">
      <div class="card-block">
        <p>
        We erase all devices so you don't have to, but we recommend that you delete any personal information from your devices before hand, but rest easy knowing that we will erase everything for you if your unable to.
        </p>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" role="tab" id="headingFour">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          Is my data Safe? <i class="fa fa-plus collape-plus"></i>
        </a>
      </h5>
    </div>
    <div id="collapseFour" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingFour">
      <div class="card-block">
        <p>
        100%, your security is our number one priority, We use Ministry of Defence standards to wipe the data from your recycled technology, To meet our data protection commitments, we will professionally erase all devices and factory reset all phones and tablets. Our processes ensure that your personal data is removed from any device before it is recycled and given a new home.
        </p>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" role="tab" id="headingFive">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          Is there a limit to what I can recycle? <i class="fa fa-plus collape-plus"></i>
        </a>
      </h5>
    </div>
    <div id="collapseFive" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingFive">
      <div class="card-block">
        <p>
        No, you can recycle as little or as much as you wish, we do however process this a little differently, if you are looking to recycle 5 items or less we will provide FREE postage for the item, all you need to do it safely package these up, we’re even cover the cost of a box for you ( Maximum £2.50).
        <br /><br />
5 items or more we will provide a FREE, dedicated courier from our outstanding partners to collect the items and deliver them back to us in a safe timely manner.
        </p>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" role="tab" id="headingSix">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
          What technology do you accept? <i class="fa fa-plus collape-plus"></i>
        </a>
      </h5>
    </div>
    <div id="collapseSix" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingSix">
      <div class="card-block">
        <p>
        We are happy to accept anything that you are looking to recycle from you Schools, Businesses or Charities, below is a just an example of what we accept, <strong>if you don’t see below what your looking to recycle, then contact us, we’ve got you covered.</strong>
        <br /><br />
      Items paid for
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Desktop / PC's
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Monitors
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Laptops
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> All In One PC’s
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Mobile Phones
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Tablets
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Televisions
        <br /><br />
        Free recycled items ( when collected with one of the above)
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Keyboards &amp; Mouse
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Printers
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Blenders
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Toasters
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Kettles
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Microwaves
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> DVD / Blu Ray players
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Sounds systems
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Any other household electrical items
        </p>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" role="tab" id="headingSeven">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
          What technology conditions do you accept? <i class="fa fa-plus collape-plus"></i>
        </a>
      </h5>
    </div>
    <div id="collapseSeven" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingSeven">
      <div class="card-block">
        <p>
        We’re not like other companies that worry about little scratches here and there, we understand that these are used items, we accept all conditions, if your not sure on level of damage then just contact us and we’re take it from there.
        </p>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" role="tab" id="headingEight">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
          How do I have to package my items? <i class="fa fa-plus collape-plus"></i>
        </a>
      </h5>
    </div>
    <div id="collapseEight" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingEight">
      <div class="card-block">
        <p>
        When we are providing a courier to collect the items, they will happily place all the items onto a pallet in their van, you don’t need to do anything, if you are looking to recycle a small amount then packing these into bubblewrap is ideal, we will happily cover the cost of a box along with FREE postage.
        </p>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" role="tab" id="headingNine">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
          How do we receive payment? <i class="fa fa-plus collape-plus"></i>
        </a>
      </h5>
    </div>
    <div id="collapseNine" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingNine">
      <div class="card-block">
        <p>
        We’re happy to make payment in the most convenient way for YOU, just let us know how you want to receive payment and we have you covered.
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Bank transfer
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> PayPal
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> BACS payment
        <br />
        <i class="fa fa-check-square-o" aria-hidden="true"></i> Cheque
        </p>
      </div>
    </div>
  </div>
  
</div>
        </div>
      </div>
      <!-- Collape Section End Here -->      
    </div>   
  
  </div>

<?php include( 'includes/footer.php' ); ?>

Thank you in advance

[KK]

It seems to be a staple case for repeatable-regions - define a region for question and another for answer.

Oh right ok, have you got a link or sample coding I can have a look at or try, I found this link: https://docs.couchcms.com/concepts/repe ... gions.html

[KK]

Yes, that is the correct link (it has the sample code).

There have been more features added to repeatable-regions lately. You can find them under '3. Revised repeatable-regions' here - viewtopic.php?f=5&t=11105
I suggest you use the 'stacked_layout' option for your use-case.

Hope it helps.

Thank you, I'll have a go and see how far I get but think I could need help on it but will see how far I get and post my code if get stuck on it

I am not sure I have done it right, on the admin side, I have a section row for question and one section row for answers but I can't write any text in any of the fields, my code is below. I have another question after once got it sorted to do with the same page and font awesome icons but will get the following working first

UPDATE: I added editable bits in and can now add text and add rows on the admin side and for now added question 1 and question 2 and answer 1 and answer 2 but they are not showing on the front end, have I missed something from the code?

UPDATE: I have added in show tags but still nothing shows on the front end, think will need some help on this one as never done repeatable regions before, my updated coding is below

LATEST UPDATE: I got the data showing now on the front end but the styles is not right, there should be a + icon on the far right at the end and that changes when the answer is revealed to a minus sign. The latest updated code is below and attached a screenshot of how it should look

The URL is https://www.recycleyourtec.com/faqs.php

Code: Select all

<?php require_once( 'cms/cms.php' ); ?>

<div class="row">
        <div class="col-lg-12 anim-section mb-30">
          <div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <cms:repeatable name='question' label='Question' stacked_layout='1'> <i class="fa fa-plus collape-plus"></i>
          <cms:editable name='questions' label='Questions' type='richtext' />
          </cms:repeatable>          
          <cms:show_repeatable 'question' >
          <cms:show questions />
          </cms:show_repeatable>          
        </a>
      </h5>
    </div>
    <div id="collapseOne" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        <p>
        <cms:repeatable name='answer' label='Answer' stacked_layout='1'>
        <cms:editable name='answers' label='Answers' type='richtext' />
        </cms:repeatable>
        <cms:show_repeatable 'answer' >
        <cms:show answers />
        </cms:show_repeatable>
        </p>
      </div>
    </div>
  </div>
  
</div>
        </div>
      </div>

<?php COUCH::invoke(); ?>

I have attached a screenshot of my admin side

UPDATE: I have been playing with the coding and the updated coding is below but I still have the issue of the styling gone and the plus and minus icons not showing when the answer is revealed, each question/answer should be on it's own separate row

Code: Select all

<cms:template title='FAQs' order='4'>

<cms:repeatable name='question' label='Question' stacked_layout='1'> <i class="fa fa-plus collape-plus"></i>
<cms:editable name='questions' label='Questions' type='richtext' />
</cms:repeatable>
<cms:repeatable name='answer' label='Answer' stacked_layout='1'>
<cms:editable name='answers' label='Answers' type='richtext' />
</cms:repeatable>
</cms:template>

          <div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
         <cms:show_repeatable 'question' >
          <cms:show questions />
          </cms:show_repeatable>          
        </a>
      </h5>
    </div>
    <div id="collapseOne" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        <p>
        <cms:show_repeatable 'answer' >
        <cms:show answers />
        </cms:show_repeatable>
        </p>
      </div>
    </div>
  </div>

I have attached the screenshots again of how ti currently looks and what it should look like

UPDATE: I think I am slowly winning as been having a play around again with the coding and have managed to get the styling and accordion working but it's displays both questions and answers on the same row (see image attached called faq-cms-no-limit.jpg) but if I limit the repeatable regions to 1, only the one first question and answer is displayed (see attached image faq-cms-with-one-limit.jpg). My updated code is currently below

Code: Select all

<?php require_once( 'cms/cms.php' ); ?>

<cms:template title='FAQs' order='4'>

<cms:repeatable name='question' label='Question' stacked_layout='1'>
<cms:editable name='questions' label='Questions' type='richtext' />
</cms:repeatable>
<cms:repeatable name='answer' label='Answer' stacked_layout='1'>
<cms:editable name='answers' label='Answers' type='richtext' />
</cms:repeatable>
</cms:template>

      <div class="row">
        <div class="col-lg-12 anim-section mb-30">
          <div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0 panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
         <cms:show_repeatable 'question' limit='1' > <i class="fa fa-plus collape-plus"></i>
          <cms:show questions />
          </cms:show_repeatable>          
        </a>
      </h5>
    </div>
    <div id="collapseOne" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        <p>
        <cms:show_repeatable 'answer' limit='1' >
        <cms:show answers />
        </cms:show_repeatable>
        </p>
      </div>
    </div>
  </div>

<?php COUCH::invoke(); ?>

[KK]

Hi,

OK, so it appears you are struggling with how to handle repeatable content.
It is actually no different from the technique we used in our Aurelius tutorial and has also been explained in several other threads regarding carousels.

However, I am glad that you are seriously trying to get things right so allow me to lay out the solution step-by-step once again.

As explained in the Aurelius tutorial, whenever we deal with some content that is repeated multiple times, we begin with identifying what part of the HTML code is getting repeated and then isolating one single instance of it.

Following is (excerpted part of your raw HTML) -

Code: Select all

<div id="accordion" role="tablist" aria-multiselectable="true">

    <div class="card">
        <div class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0 panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                How does the service work? <i class="fa fa-plus collape-plus"></i>
            </a>
            </h5>
        </div>
        <div id="collapseOne" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-block">
                <p>
                    We pride ourselves on providing a simple yet highly effective service, in 3 simple steps.
                </p>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header" role="tab" id="headingThree">
            <h5 class="mb-0 panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Do I need to erase my device before sending to you? <i class="fa fa-plus collape-plus"></i>
            </a>
            </h5>
        </div>
        <div id="collapseThree" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingThree">
            <div class="card-block">
                <p>
                    We erase all devices so you don't have to, but we recommend that you delete any personal information from your devices before hand, but rest easy knowing that we will erase everything for you if your unable to.
                </p>
            </div>
        </div>
    </div>
    
</div>

As can be seen the repeating HTML is the <div class="card"> block.
So let us remove all such blocks leaving intact only one. Our code now becomes -

Code: Select all

<div id="accordion" role="tablist" aria-multiselectable="true">

        <div class="card">
            <div class="card-header" role="tab" id="headingThree">
                <h5 class="mb-0 panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    <cms:show question /> <i class="fa fa-plus collape-plus"></i>
                </a>
                </h5>
            </div>
            <div id="collapseThree" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingThree">
                <div class="card-block">
                    <cms:show answer />
                </div>
            </div>
        </div>

</div>

Next we need to figure out the portions within this block that needs to be editable. In our case, clearly there are two such portion - one for the question and another for the answer. So let us define these two regions as child regions of a single repeatable-region named 'faq' as follows -

Code: Select all

<cms:repeatable name='faq' label='FAQ' stacked_layout='1'>
    <cms:editable name='question' label='Question' type='text' />
    <cms:editable name='answer' label='Answer' type='richtext' />
</cms:repeatable>

So now we can create as many rows in this region as we need (one for each FAQ item consisting of a pair of question/answer).

Next we wrap the HTML block we isolated above with <cms:show_repeatable> substituting the hardcoded question and answer in it with the editable regions we defined. Our code now becomes -

Code: Select all

<div id="accordion" role="tablist" aria-multiselectable="true">

    <cms:show_repeatable 'faq'>
        <div class="card">
            <div class="card-header" role="tab" id="headingThree">
                <h5 class="mb-0 panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    <cms:show question /> <i class="fa fa-plus collape-plus"></i>
                </a>
                </h5>
            </div>
            <div id="collapseThree" class="collapse bg-custom" role="tabpanel" aria-labelledby="headingThree">
                <div class="card-block">
                    <cms:show answer />
                </div>
            </div>
        </div>
    </cms:show_repeatable>

</div>

At this point, you'll see that if there are, say, three rows in the repeatable-region, Couch will generate three <div class="card"> blocks for you using dynamic content.

There is still one more thing required to make our code perfect. You'll notice that the original HTML code we are using depends upon attributes like 'collapseThree' and 'headingThree' that are unique for each card (e.g. the first card has 'collapseOne' and 'headingOne'.

With our code so far, each of the generated card will have the same attributes.
Let us change that as follows -

Code: Select all

<div id="accordion" role="tablist" aria-multiselectable="true">

    <cms:show_repeatable 'faq'>
        <div class="card">
            <div class="card-header" role="tab" id="heading<cms:show k_count />">
                <h5 class="mb-0 panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse<cms:show k_count />" aria-expanded="false" aria-controls="collapse<cms:show k_count />">
                    <cms:show question /> <i class="fa fa-plus collape-plus"></i>
                </a>
                </h5>
            </div>
            <div id="collapse<cms:show k_count />" class="collapse bg-custom" role="tabpanel" aria-labelledby="heading<cms:show k_count />">
                <div class="card-block">
                    <cms:show answer />
                </div>
            </div>
        </div>
    </cms:show_repeatable>

</div>

And that should be it.
I haven't actually tested out the code but I am sure it'll help you in understanding the strategy that is required.
Hope it helps. Do let me know.

Hi KK

I am so sorry if began to annoy you, I really did try myself to understand it and get it working, just never done repeatable regions before but I went through your step by step carefully to make sure I understood each part and got it now and it's working perfect

Thank you so much