commit 15b95ce9c303cdc35a4827a8842124f93554cef8 Author: Damian Johnson atagar@torproject.org Date: Thu Jul 27 19:44:23 2017 -0700
Stub FAQ section
Couple question stubs for colapsing and expanding. --- web/index.html | 34 +++++++++++++++++++++++++++++++++- web/styles.css | 20 ++++++++++++++++++++ 2 files changed, 53 insertions(+), 1 deletion(-)
diff --git a/web/index.html b/web/index.html index 4f4dc4a..f8710ed 100644 --- a/web/index.html +++ b/web/index.html @@ -88,7 +88,24 @@ </div>
<div id="faq" class="content"> - <h1>FAQ coming soon</h1> + <div class="section"></div> + <a href="#faq" class="section-title">Fact & Question</a> + + <br /><br /> + + <div class="question" id="question_1"> + <span>Demo question 1</span> + <div class="answer_container"> + <div class="answer">answer 1</div> + </div> + </div> + + <div class="question" id="question_2"> + <span>Demo question 2</span> + <div class="answer_container"> + <div class="answer">answer 2</div> + </div> + </div> </div>
<div id="download" class="content"> @@ -185,6 +202,21 @@ } else if ($("#download").find(anchor).length) { tabs.click("download"); } + + // show/hide for FAQ questions + + $('.question').click(function() { + var answer = $(this).find('.answer_container'); + + if (answer.is('.open')) { + answer.animate({'height': '0'}, 100); + answer.removeClass('open'); + } else { + var newHeight = $(this).find('.answer').height() + 'px'; + answer.animate({'height': newHeight}, 100); + answer.addClass('open'); + } + }); }); </script> </body> diff --git a/web/styles.css b/web/styles.css index 846cd2f..7e6a10c 100644 --- a/web/styles.css +++ b/web/styles.css @@ -151,6 +151,26 @@ Front Page }
/*============================================================ +FAQ Page +============================================================*/ + +.question { + color: #523a17; + cursor: pointer; + font-size: 24px; + font-weight: bold; + margin: 0px; + padding: 0px 0px 5px 0px; + text-align: left; +} + +.answer_container { + height: 0px; + overflow: hidden; + padding: 0px; +} + +/*============================================================ Download Page ============================================================*/