mmalecki/coolfaq.htm

## coolfaq.htm
<!doctype html>
<html>
  <head>
    <title>FAQ</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .column {
        float: left;
      }

      .left {
        background-color: #007FFF;
        width: 15%;
      }

      .right {
        background-color: #8AA4B7;
        width: 85%;
      }

      .answer {
        display: none;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
      function uncollapse(id) {
        $("#a" + id).slideDown();
      }

      function toggleCollapse(id) {
        $("#a" + id).slideToggle();
      }

      function collapse(id) {
        $("#a" + id).slideUp();
      }

      function searchPage(text) {
        elements = $(".answer");
        for (var i = 0; i < elements.length; i++) {
          e = elements[i];
          j = $(elements[i]);
          if (e.innerHTML.toLowerCase().indexOf(text.toLowerCase()) >= 0) {
            if (j.is(":hidden"))
              j.slideDown();
          }
          else
            j.slideUp();
        }
      }
    </script>

    <nav class="column left">
      <h1>Questions</h1>
      <ol>
        <li><a href="#a0" onclick="javascript:toggleCollapse('0');">What is it about?</a></li>
        <li>
          <a href="#a1" onclick="javascript:toggleCollapse('1');">Privacy</a>
          <ol>
            <li><a href="#a1_0" onclick="javascript:toggleCollapse('1_0');">Password policy</a></li>
            <li><a href="#a1_1" onclick="javascript:toggleCollapse('1_1');">Selling your data to other companies</a></li>
          </ol>
        </li>
        <li><a href="#a2" onclick="javascript:toggleCollapse('2');">Creators and license</a></li>
      </ol>
    </nav>

    <section class="column right">
      <h1>Answers</h1>

      <div style="float: right;">
        <form action="#">
          <input type="search" id="search" placeholder="Search here..."
                 onkeypress="javascript:searchPage(this.value)"
                 onchange="javascript:searchPage(this.value)" />
        </form>
      </div>

      <ol>
        <li>
          <a name="a0" href="#a0" onclick="javascript:toggleCollapse('0');">What is it about?</a>
          Why does our service exist and what is it for?
          <article id="a0" class="answer">
            It's all about Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis nibh sagittis mi molestie vitae semper diam eleifend. Donec scelerisque, tellus ut pharetra pulvinar, libero magna interdum nisl, sit amet pharetra mi metus at dolor. Nam purus massa, mattis quis vulputate vel, lobortis sit amet massa. Duis eu nisi velit, eu tempus orci. Fusce rutrum ultricies orci, sed cursus tellus auctor nec. Aenean id nulla augue. Curabitur tortor est, mattis sed pretium quis, vulputate et eros. Aliquam libero enim, euismod non sagittis in, tempus ac libero.
          </article>
        </li>

        <li>
          <a name="a1" href="#a1" onclick="javascript:toggleCollapse('1');">Privacy</a>
          Describes our privacy policies.
          <article id="a1" class="answer">
            We seriously care about privacy. <a href="http://xkcd.com/792/">Just like these guys.</a>
            <ol>
              <li>
                <a name="a1_0" href="#a1_0" onclick="javascript:toggleCollapse('1_0');">Password policy</a>
                What kind of passwords should I use?

                <article id="a1_0" class="answer">
                  "isecretlylove50cent&lt;3" tends to be mostly used. However, you can also use something like: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis nibh sagittis mi molestie vitae semper diam eleifend. Donec scelerisque, tellus ut pharetra pulvinar, libero magna interdum nisl, sit amet pharetra mi metus at dolor. Nam purus massa, mattis quis vulputate vel, lobortis sit amet massa.".
                </article>
               </li>
              <li>
                <a name="a1_1" href="#a1_1" onclick="javascript:toggleCollapse('1_1');">Selling your data to other companies</a>
                And how much do we earn on it?
                <article id="a1_1" class="answer" style="display: block">
                  We sell your data to everyone on each of Internets we own, so we can haz infinite profit. BTW, we made this block visible by default, so you can see how bad are we.
                </article>
              </li>
            </ol>
          </article>
        </li>

        <li>
          <a name="a2" href="#a2" onclick="javascript:toggleCollapse('2');">Creators and license</a>
          How is this service licensed and can I modify it? Who wrote it?
          <article id="a2" class="answer">
            Maciej Małecki. License: GPL.
          </article>
        </li>
      </ol>
    </section>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>FAQ</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.column {
	float: left;
	}

	.left {
	background-color: #007FFF;
	width: 15%;
	}

	.right {
	background-color: #8AA4B7;
	width: 85%;
	}

	.answer {
	display: none;
	margin-bottom: 10px;
	}
	</style>
	</head>
	<body>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript">
	function uncollapse(id) {
	$("#a" + id).slideDown();
	}

	function toggleCollapse(id) {
	$("#a" + id).slideToggle();
	}

	function collapse(id) {
	$("#a" + id).slideUp();
	}

	function searchPage(text) {
	elements = $(".answer");
	for (var i = 0; i < elements.length; i++) {
	e = elements[i];
	j = $(elements[i]);
	if (e.innerHTML.toLowerCase().indexOf(text.toLowerCase()) >= 0) {
	if (j.is(":hidden"))
	j.slideDown();
	}
	else
	j.slideUp();
	}
	}
	</script>

	<nav class="column left">
	<h1>Questions</h1>
	<ol>
	<li><a href="#a0" onclick="javascript:toggleCollapse('0');">What is it about?</a></li>
	<li>
	<a href="#a1" onclick="javascript:toggleCollapse('1');">Privacy</a>
	<ol>
	<li><a href="#a1_0" onclick="javascript:toggleCollapse('1_0');">Password policy</a></li>
	<li><a href="#a1_1" onclick="javascript:toggleCollapse('1_1');">Selling your data to other companies</a></li>
	</ol>
	</li>
	<li><a href="#a2" onclick="javascript:toggleCollapse('2');">Creators and license</a></li>
	</ol>
	</nav>

	<section class="column right">
	<h1>Answers</h1>

	<div style="float: right;">
	<form action="#">
	<input type="search" id="search" placeholder="Search here..."
	onkeypress="javascript:searchPage(this.value)"
	onchange="javascript:searchPage(this.value)" />
	</form>
	</div>

	<ol>
	<li>
	<a name="a0" href="#a0" onclick="javascript:toggleCollapse('0');">What is it about?</a>
	Why does our service exist and what is it for?
	<article id="a0" class="answer">
	It's all about Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis nibh sagittis mi molestie vitae semper diam eleifend. Donec scelerisque, tellus ut pharetra pulvinar, libero magna interdum nisl, sit amet pharetra mi metus at dolor. Nam purus massa, mattis quis vulputate vel, lobortis sit amet massa. Duis eu nisi velit, eu tempus orci. Fusce rutrum ultricies orci, sed cursus tellus auctor nec. Aenean id nulla augue. Curabitur tortor est, mattis sed pretium quis, vulputate et eros. Aliquam libero enim, euismod non sagittis in, tempus ac libero.
	</article>
	</li>

	<li>
	<a name="a1" href="#a1" onclick="javascript:toggleCollapse('1');">Privacy</a>
	Describes our privacy policies.
	<article id="a1" class="answer">
	We seriously care about privacy. <a href="http://xkcd.com/792/">Just like these guys.</a>
	<ol>
	<li>
	<a name="a1_0" href="#a1_0" onclick="javascript:toggleCollapse('1_0');">Password policy</a>
	What kind of passwords should I use?

	<article id="a1_0" class="answer">
	"isecretlylove50cent<3" tends to be mostly used. However, you can also use something like: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis nibh sagittis mi molestie vitae semper diam eleifend. Donec scelerisque, tellus ut pharetra pulvinar, libero magna interdum nisl, sit amet pharetra mi metus at dolor. Nam purus massa, mattis quis vulputate vel, lobortis sit amet massa.".
	</article>
	</li>
	<li>
	<a name="a1_1" href="#a1_1" onclick="javascript:toggleCollapse('1_1');">Selling your data to other companies</a>
	And how much do we earn on it?
	<article id="a1_1" class="answer" style="display: block">
	We sell your data to everyone on each of Internets we own, so we can haz infinite profit. BTW, we made this block visible by default, so you can see how bad are we.
	</article>
	</li>
	</ol>
	</article>
	</li>

	<li>
	<a name="a2" href="#a2" onclick="javascript:toggleCollapse('2');">Creators and license</a>
	How is this service licensed and can I modify it? Who wrote it?
	<article id="a2" class="answer">
	Maciej Małecki. License: GPL.
	</article>
	</li>
	</ol>
	</section>
	</body>
	</html>