Project FAQ-Beta Codelab

Start codelab

Codelab Flow

Download faq-beta

L Last updated on 06/07/18 F Frequently Asked Questions

Download faq-beta into your project's root folder. Configure the faq-beta.html section's to fit your project's or company's needs.

Our default faq-beta.html is an example of a well configured one ready for use. Make sure to configure your faq-beta.htm file as in the code below.

Description View Code On Github

faq-beta is built with javascript, html5 and css. You need atleast an intermediate background in all of these languages to get started even though anyone with or without skills in the same can set up with the guide provided.

Make sure to configure your faq-beta.htm file as in the code below.



  <!--
  Author : Maye Edwin : https://maye.gdgmoi.com hosted by : https://www.pwafire.org
  License : https://github.com/mayeedwin/faq-beta/blob/master/LICENSE
  -->
  <section id="gdg-faqs">
        <div align="center">
        <br>
        <h3>Frequently asked questions ( FAQs )</h3>
        <br>
        <p class="faqbeta_accordion">How can I join GDG Eldoret?</p>
        <div class="faqbeta_panel">Join our GDG Community <a href="https://www.meetup.com/gdgeldoret">Here</a> to become an official member.</div>

        <p class="faqbeta_accordion">Q2. Must I be from Eldoret?</p>
        <div class="faqbeta_panel">Nop! Our GDG is pen for all! You are required to attend our events as frequent as you can.</div>

        <p class="faqbeta_accordion">Q3. Do we have any subscription fee?</p>
        <div class="faqbeta_panel">Nop! We do not collect any subscription fee whatsover.</div>

        <p class="faqbeta_accordion">Q4. Where do I register for events early?</p>
        <div class="faqbeta_panel">Join our GDG Community <a href="https://www.meetup.com/gdgeldoret">Here to be the first to know when RSVPs are open./div>
        </div>
        <br>
    </section>

Latest Commit

Styling faq-beta

Here you may configure the faq-beta.css file to fit your website's or web app's theme colors or leave it as it's. Link up your page to the faq-beta.js and faq-beta.css files.

Description View Code On Github

Here you may configure the faq-beta.css file to fit your website's or web app's theme colors or leave it as it's.

Follow the steps as commented in the code below in order to correctly configure the faq-beta.css file.

                
      /* Author : Maye Edwin : https://maye.gdgmoi.com
      hosted by : https://www.pwafire.org
      License : https://github.com/mayeedwin/faq-beta/blob/master/LICENSE
      */
                
      /* Style the element that is used to open and close the faqbeta_accordion class */
                    
      p.faqbeta_accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 700px;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
      margin-bottom: 10px;
      box-shadow: 0 1px 1px 0 rgba(10, 16, 34, .2);
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
      flex: 1;
      border-radius: 7px;
      font-size: 14px;
      }
                    
      /* Add a background color to the faqbeta_accordion if it is clicked on
      (add the .active class with JS), and when you move the mouse over it (hover) */
                    
      p.faqbeta_accordion.active,
      p.faqbeta_accordion:hover {
      background-color: #ddd;
      }
                    
      /* Unicode character for "plus" sign (+) */
                    
      p.faqbeta_accordion:after {
      content: '\2795';
      font-size: 14px;
      color: #777;
      float: right;
      margin-left: 5px;
      }
                    
      /* Unicode character for "minus" sign (-) */
                    
      p.faqbeta_accordion.active:after {
      content: "\2796";
      }
                    
      /* Style the element that is used for the faqbeta_panel class */
                    
      div.faqbeta_panel {
      padding: 0 18px;
      background-color: #fbfbfb;
      max-height: 0;
      overflow: hidden;
      transition: 0.4s ease-in-out;
      opacity: 0;
      margin-bottom: 10px;
      text-align: left;
      width: 700px;
      }
                    
      div.faqbeta_panel.show {
      opacity: 1;
      max-height: 500px;
      /* Whatever you like, as long as its more than the height
      of the content (on all screen sizes) */
      }
      /*style the main faq-beta section*/
      #gdg-faqs {
      padding: 10px;
      background-color: #fbfbfb;
      }
                    
      /*  define for pixel-device ratio */
            
      @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (-o-device-pixel-ratio: 3/2),
      only screen and (min-device-pixel-ratio: 1.5) {
      #gdg-faqs {
      padding: 10px;
      }
      p.faqbeta_accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
      }
      div.faqbeta_panel {
      width: auto;
      }
      }

Latest Commit

What's next?

To make it more exciting, the next version of project faq-beta will have a json file that will alow you to just configure faq-beta by filling in your questions and answers without the need of editing faq-beta.html.

Support

Donate a Star and Contribute in any way. Be sure to Follow and use Project FAQ-Beta. If you use FAQ-Beta kindly let us know via info@pwafire.org | mayedwine1@gmail.com or JUST simply Tweet us

License

FORK ON GITHUB