faqs-entry-created-concept

by Bhesh Gurung

HTML

<div id="create-entry-container">
    <div id="title">
        ENTRY SUCCESSFULLY CREATED
    </div>
    <div class="thickLine"></div>
    <div id="question-area">
        A sample question 3
    </div>
    <div id="answer-area">
        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.
    </div>
    <div id="actions-area">
        <a id="edit">edit</a>
        <span style="display: inline-block; width: 40px;"></span>
        <a id="delete">delete this entry</a>
        <a id="create">create new entry</a>
        <a id="listing">listing</a>        
    </div>
</div>

CSS

html {
    font-size: 11px;
    font-family: Helvetica, Arial, Sans-Serif;
    color: #333;
}
div.thickLine {
    border: 0 none;
    height: 2px;
    margin: 0 0 10px 0;
    background-color: #bbb;    
}
#title {
    border: 0 none; 
    padding: 2px;
    font-weight: 600;
    color: #333;
}

#create-entry-container {
    border: 0 none; 
    padding: 2px;
}

#question-area {
    border: 0 none;
    padding: 2px;
    font-weight: 600;
}

#answer-area {
    border: 0 none;
    padding: 2px;
    margin-top: 2px;
}

#actions-area {
    border: 0 none;
    padding: 2px;
    margin: 10px 0 10px 0;
}

a {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 110px;
    border: 1px solid #efefef;
    background-color: #666;
    text-align: center;
    text-decoration: none;
    color: #eee;
    font-weight: 600;
}

a:hover, a.hover { 
    background-color: #0080FF;
}

JavaScript

$(document).ready(function() {
    $( "#edit" ).on( "click", function() {
        alert( $( this ).text() );
    });
    
    $( "#delete" ).on( "click", function() {
        alert( $( this ).text() );
    });
    
    $( "#create" ).on( "click", function() {
        alert( $( this ).text() );
    });
    
    $( "#listing" ).on( "click", function() {
        alert( $( this ).text() );
    });
});