#faq template

｡◕‿◕｡New Upload! ｡◕‿◕｡

⟢ Creds: Xylia’s text decor!

Note﹕meow!

｡◕‿◕｡┈** Thanks for viewing! **

﹒ᶻz﹐☆﹔⿴﹒**__FAQ !!__**

◜✦. * . ☆ . ✦ . ☆ ⁺ . ᕀ ☆ ✦

`🔭`﹐∇﹒✶﹐`question`

﹒❀﹕`📃`﹐➜﹒__answer__

`🔭`﹐∇﹒✶﹐`question`

﹒❀﹔`📃`﹐➜﹒__answer__

`🔭`﹐∇﹒✶﹐`question`

﹒❀﹕`📃`﹐➜﹒__answer__

`🔭`﹐∇﹒✶﹐`question`

﹒❀﹔`📃`﹐➜﹒__answer__

◟✦. * . ☆ . ✦ . ☆ ⁺ . ᕀ ☆ ✦

here is a thingy that will tell you more about me and what i will post about.

First name: Rebekah (yes i know the fancy spelling is hebrew XP) Nickname: Becky, Bekah, Bex, Beckleberry (don’t ask) Age: Quarter of a Century yo! so old sometimesT-T  Gender: FEM FATALE Sexual Orientation: pan-romantic demi-heterosexual? how do you even tell? Nationality: USA, fourth/fifth/seventeenth gen immigrant check/german/italian/spanish/english/welsh/norse (vikings yo!) Relationship status: avoiding all relationships except those i ship Likes: fantasy/scifi/psyctological horror/cats/mom/purple/green/star trek/star wars/actual stars like vega/astronomy/runes/fan fiction/drawing/photography/paintings/weird fashion/stuffs/lots of lots of stuff Dislikes: cranberries/cashews/cooked brussel sprouts/spinach/bugs/bloody gore horror/bashing fics/neons and pastel yellow(makes my skin look weird)/exercise/white chocolate (it’s fat pure fat....) Random fact: I have a rare disease called idiopathic intracranial hypertension which is too much fluid in the brain that is also referred to in general as psuedo-tumor cerebri. I also have a whole bunch of random conditions so there may be times where i post random medical facts or something. there is no real cure or treatment for iih but please visit http://ihrfoundation.org if you want more information.

also i ship spock/kirk pretty hard but i call it spork instead of spirk because it’s like a fork and a spoon had a baby and kirk is like the fork cause he just stabs everything and spock is the spoon and he can even eat peas with it because he is just that fancy.

New Post has been published on http://www.htmluse.com/faq-template-with-css-and-jquery/

FAQ Template with CSS and jQuery

Download   Demo

This plugin is An easy to customize template for the FAQ section of your project, with the questions/answers grouped in categories to ease the navigation. Powered by CSS and jQuery.

Creating the structure

We wrapped the resource HTML into a .cd-faq section. The content is split into 2 main divs – .cd-faq-categories and .cd-faq-items – the first being the navigation and the second being the list of questions/answers. Each .cd-faq-group is an unordered list containing FAQ belonging to the same category/group.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<section class=“cd-faq”>

    <ul class=“cd-faq-categories”>

        <li><a href=“#basics”>Basics</a></li>

        <li><a href=“#mobile”>Mobile</a></li>

        <li><!– … –></li>

    </ul>

    <div class=“cd-faq-items”>

        <ul id=“basics” class=“cd-faq-group”>

            <li class=“cd-faq-title”><h2>Basics</h2></li>

            <li>

                <a class=“cd-faq-trigger” href=“#0″>How do I change my password?</a>

                <div class=“cd-faq-content”>

                    <!– content here –>

                </div>

            </li>

            <li>

                <a class=“cd-faq-trigger” href=“#0″>How do I sign up?</a>

                <div class=“cd-faq-content”>

                    <!– content here –>

                </div>

            </li>

            <li><!– … –></li>

        </ul>

        <ul id=“mobile” class=“cd-faq-group”>

            <!– … –>

        </ul>

        <!– … –>

    </div>

</section>

Adding style

The CSS is pretty simple, you can download the source file and check yourself. I added comments to the ‘tricky’ parts as well. One thing I’d like to point out though: we used the .no-js class to make this nugget compatible with devices with no support for javascript (or for devices whose javascript has been turned off by the user).

The way this class works is: we assign it to the <html> element. Modernizr removes this class and assign a .js class instead. You get the point: if Modernizr is not working – hence javascript is not working – you can use the .no-js class to make your content accessible (i.e. if you hid an element by default – making it visible on click with javascript, you can override its style and make sure it’s always accessible). Or the other way around: you can use the .js class assigned by Modernizr to progressively enhance your website.

As Jeremy Keith wisely points out: “You begin with your content, then you layer on your presentation using CSS and then you layer on your behaviour using JavaScript. And hopefully you’ll recognise this stack as the idea of progressive enhancement on the web”.

Events handling

When user selects one of the faqs category from the .cd-faq-categories element, for viewport smaller than 768px (MqM variable defined in the main.js file), we assign the.slide-in class to .cd-faq-items and the .selected class to the corresponding .cd-faq-group. We have been using jQuery mobile to enable the swipe event to close the slide-in panel. For larger viewport, instead, the body smoothly scrolls down to the selected .cd-faq-group.

New Post has been published on http://www.htmluse.com/faq-template/

FAQ Template

Download   Demo

This jquery plugin FAQ Template is an easy to customize template for the FAQ section of your project, with the questions/answers grouped in categories to ease the navigation.

Chances are that your project needs a help center section, with information to support your users such as contact info and frequently asked/answered questions. We put together an easy-to-customize template you can use to build your FAQ upon. It’s responsive, powered by CSS and jQuery, with support for devices with Javascript turned off.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/style.css"> <!-- Resource style --> <script src="js/modernizr.js"></script> <!-- Modernizr --> <script src="js/jquery-2.1.1.js"></script> <script src="js/jquery.mobile.custom.min.js"></script> <script src="js/main.js"></script> <!-- Resource jQuery -->

2. HTML

We wrapped the resource HTML into a .cd-faq section. The content is split into 2 main divs – .cd-faq-categories and .cd-faq-items – the first being the navigation and the second being the list of questions/answers. Each .cd-faq-group is an unordered list containing FAQ belonging to the same category/group.

<section class="cd-faq"> <ul class="cd-faq-categories"> <li><a href="#basics">Basics</a></li> <li><a href="#mobile">Mobile</a></li> <li><!-- ... --></li> </ul> <div class="cd-faq-items"> <ul id="basics" class="cd-faq-group"> <li class="cd-faq-title"><h2>Basics</h2></li> <li> <a class="cd-faq-trigger" href="#0">How do I change my password?</a> <div class="cd-faq-content"> <!-- content here --> </div> </li> <li> <a class="cd-faq-trigger" href="#0">How do I sign up?</a> <div class="cd-faq-content"> <!-- content here --> </div> </li> <li><!-- ... --></li> </ul> <ul id="mobile" class="cd-faq-group"> <!-- ... --> </ul> <!-- ... --> </div> </section>

3. ADDING STYLE

The CSS is pretty simple, you can download the source file and check yourself. I added comments to the ‘tricky’ parts as well. One thing I’d like to point out though: we used the .no-js class to make this nugget compatible with devices with no support for javascript (or for devices whose javascript has been turned off by the user).

The way this class works is: we assign it to the <html> element. Modernizr removes this class and assign a .js class instead. You get the point: if Modernizr is not working – hence javascript is not working – you can use the .no-js class to make your content accessible (i.e. if you hid an element by default – making it visible on click with javascript, you can override its style and make sure it’s always accessible). Or the other way around: you can use the .js class assigned by Modernizr to progressively enhance your website.

As Jeremy Keith wisely points out: “You begin with your content, then you layer on your presentation using CSS and then you layer on your behaviour using JavaScript. And hopefully you’ll recognise this stack as the idea of progressive enhancement on the

4. EVENTS HANDLING

When user selects one of the faqs category from the .cd-faq-categories element, for viewport smaller than 768px (MqM variable defined in the main.js file), we assign the .slide-in class to .cd-faq-items and the .selected class to the corresponding .cd-faq-group. We have been using jQuery mobile to enable the swipe event to close the slide-in panel.

For larger viewport, instead, the body smoothly scrolls down to the selected .cd-faq-group.