Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
    #accordion ul{
    margin-bottom:20px;
    padding-top:15px;
    list-style:none;
        }
        #accordion ul li {
        font-weight: normal;
        cursor: auto;
        clear:both;
        width:565px;
        margin:0 0 2px 15px;
        position:relative;
            }    
            #accordion ul li .sentence{
            width:480px;
            padding:5px 5px;
            border:1px solid #ccc;
            border-radius:3px;
            margin:0 0 0 60px;
            cursor:pointer;
            clear:none;
                } 
                #accordion ul li .sentence:hover{
                background: #F5F5F5;
                }        
            #accordion ul li .status-green{
             float:left;
            width:50px;
            background: #F7FFE3 ;
            border: #ADE04D 1px solid;
            }
</style>
</head>
<body>
               <div id="accordion">        
                         <ul>
                            <li>
                                <div class="status-green"></div>
                                <div class="sentence">
                                The price of a property can be affected by many factors including the political 
                                stability and economic situation of its surrounding area.
                                </div>
                            </li>
                            <li>
                                <div class="status-green"></div>
                                <div class="sentence">
                                ...
                                </div>
                            </li>
                            <li>
                                <div class="status-green"></div>
                                <div class="sentence">
                                stability and economic situation of its surrounding area.
                                </div>
                            </li>
                            <li>
                                <div class="status-green"></div>
                                <div class="sentence">
                                The price of a property can be affected by many factors including the political 
                                stability and economic situation of its surrounding area.The price of a property can be affected by many factors including the political 
                                stability and economic situation of its surrounding area.
                                </div>
                            </li>
                        </ul>
                </div>
  
  
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers