privateq/faq.html at master · comcomist/privateq · GitHub

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
  <head>
    <title>faq</title>
    <style>
      html, body {
        font-size: 100%;
      }

      .faq {
        margin: 50px;
      }

      .faq dt,
      .faq dd {
        padding: 10px;
        border: 1px solid #000;
      }

      .faq dt a,
      .faq dd a {
        display: block;
        color: #000;
        font-weight: bold;
      }

      .faq dt {
        background-color: #ccc;
      }

      .faq dd {
        margin: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        font-size: 1rem;
      }

      .faq dd:last-of-type {
        border-bottom-width: 1px;
      }
    </style>

    <script src="js/jquery.1.11.2.min.js"></script>

    <script type="text/javascript">
      jQuery(document).ready(function($){
        var questions = $('.faq > dd').hide();// Hide all questions to start
        //questions.first().show();//Show first question on load (optional). Remove if you want
        $('.faq > dt > a').click(function() {// On click of question title
          var $this = $(this);
          var t= $this.parent().next();
		if(t.attr("on")=="1")	{t.slideUp();t.attr("on","0"); }
		else		{t.slideDown(); t.attr("on","1");}
          return false;
        });
      });
    </script>
  </head>
  <body><p>This is a paraglkjlkjraph.</p>
    <dl class="faq">
      <dt><a href=""> + why 1?</a></dt>
      <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nisl quam, convallis ac lacus vel, mollis bibendum ante.</dd>

      <dt><a href="">+ why 2?</a></dt>
      <dd>Suspendisse potenti. In ullamcorper posuere nibh, in pretium metus porttitor vitae. Aenean felis libero, condimentum sagittis.</dd>

      <dt><a href=""> + why 3?</a></dt>
      <dd>Laoreet quis, auctor in orci. Ut gravida nibh vitae lorem egestas, vel commodo mi gravida. Curabitur elementum dolor id lacus.</dd>
    </dl>
<p>This is a paraglkjlkjraph.</p>
  </body>
</html>