fast-faq-concept

by Bhesh Gurung

HTML

<div class="container">
     <div id="title">
        SEARCH ENTRIES
    </div>
    <div class="titleUnderline"></div>
    <div id="search-container">        
        <div id="searchlabel-container">KEY WORDS</div>
        <div id="searchtf-container"><input id="searchtf" type="text"></input></div>        
    </div>
    <div id="suggestions">
        
    </div>
</div>

CSS

body {
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 11px;
    color: #333;
}

*:focus {
    outline: none;
}

#searchtf-container {
    overflow: hidden;    
    border: 1px solid #666;
    padding: 0px 5px 0px 5px;
    background-color: #fff;
}

#searchlabel-container {
    width: 100px;
    float: right;
    text-align: center;
    height: 20px;
    line-height: 22px;
    font-weight: 600;
    color: #efefef;    
}

#title {
    border: 0 none; 
    padding: 2px;
    font-weight: 600;
    color: #333;
}
div.titleUnderline {
    border: 0 none;
    height: 2px;
    margin: 0 0 10px 0;
    background-color: #bbb;    
}
.container {
    margin 100px 10px 10px 10px;    
}
#search-container {
    margin: 0px 0px 10px 0px;
    background-color: #666;
}
#searchtf {
    display:block; 
    width:100%;
    padding: 0;
    border-width: 0;    
    height: 20px;    
}
.suggestions {
    border: 1px solid #298A08;
}
.suggestion-container {
    border: 0 none;
    padding: 2px 2px 2px 2px;
}
.question {
    display: block;
    margin: 0px 0px 2px 0px;
    font-weight: 600;
    line-height: 20px;
}
.answer {
    display: block;
    overflow: hidden;
    line-height: 14px;
}
.thickLine {
    border: 0 none;
    height: 2px;
    margin: 5px 0 5px 0;
    background-color: #D8D8D8;
}
.thinLine {
    border: 0 none;
    height: 1px;
    margin: 5px 0 5px 0;
    background-color: #D8D8D8;
}

JavaScript

var suggestions = [
    {question: "A sample question 1.", answer: "A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer."},
    {question: "A sample question 2.", answer: "A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer."},
    {question: "A sample question 3.", answer: "A sample answer."},
    {question: "A sample question 4.", answer: "A sample answer."},
    {question: "A sample question 5.", answer: "A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer. A sample answer."} ];

$(document).ready(function() {
    $.each(suggestions, function(index, item) {
        var listItem = "<div class='suggestion-container'>"...