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 src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="integration-list">
    <ul>
        <li>
            <a class="expand">
                <div class="right-arrow">&#9654;</div>
                <div>
                   
                    <h2>Name</h2>
 
                </div> 
​
            </a>
            <div class="detail"><div id="titles"><span>Application</span></div>
​
​
                <div id="right" style="width:100%;float:right;height:100%;padding-left:60px;">
                    <div id="sup">
                      
                               
                               
                   
                     
                        
                                            
                </div>
            </div>
​
            </div> 
           
           
        </li>
 
       
    </ul>
</div>
</body>
</html>
 
   *,
*:before,
*:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}
​
#integration-list {
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    margin: 0 auto;
    display: table;
    background-color:#fff;
    padding:20px 40px 20px 40px;
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-bottom:30px;
}
#integration-list ul {
    padding: 0;
    margin: 20px 0;
    color: #555;
}
​
#integration-list h2:hover {
    color:#0195ff;
​
}
​
#integration-list .right-arrow:hover {
    color:#0195ff;
​
}
​
#integration-list ul > li {
    list-style: none;
    border: 1px solid #0195ff;
    display: block;
    padding: 5px 25px 5px 15px;
    overflow: hidden;
    background-color:#f7f7f7;
      -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-bottom:10px;
    
}
​
#integration-list ul > li:hover {
    background: #fff;
    
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
    height:60px;
    margin-top:20px;
    
}
​
#titles {
  position: relative;
  left: -200px;
}
​
.expand:hover {
  color:#0195ff;
    
}
​
​
h2 {
    padding: 0;
    margin: 0;
    font-size: 22px;
    line-height:50px;
    font-family:'Segoe UI';
    font-weight:200;
}
​
#left,#right{
    display: table;
  
}
#sup{
    display: table-cell;
    vertical-align: middle;
    width: 80%;
     
}
.detail a {
    text-decoration: none;
    color: #808080;
    padding: 20px;
    font-size: 18px;
  margin-right: 7px;
  font-weight:400;
   font-family:'Segoe UI';
  
}
.detail {
    margin:40px 0px 10px 0px;
    display: none;
    line-height: 22px;
    height: 150px;
    margin-left:0;
    
}
​
.slidein {
    margin-left:0px;
    border:1px solid red;
        
}
​
​
.detail span{
    margin: 0;
}
.right-arrow {
    margin-top: 8px;
    width: 10px;
    height: 100%;
    float: right;
    font-weight: bold;
    font-size: 20px;
    margin-right:10px;
​
}
.icon {
    height: 75px;
    width: 75px;
    float: left;
    margin: 0 15px 0 0;
}
​
#App-Details span {
     font-family:'Segoe UI';
    font-weight:300;
    font-size:20px;
    color:#0195ff;
​
}
​
#App-Details {
    font-family:'Segoe UI';
    font-weight:200;
}
​
 
 /*$(function () {
        $(".expand").on("click", function () {
            
            $(this).toggleClass('slidein').next().slideToggle();
​
            $expand = $(this).find(">:first-child");
            
          
            if ($expand.text() == "\u25B6") {
                $expand.text("\u25BC");
              
​
            } else {
                $expand.text("\u25B6");
            }
        });
      
    });*/
​
​
 $(function () {
        $(".expand").on("click", function () {
          
          console.log($(this).parent().find('.detail').css('display'));
            
            if( $(this).parent().find('.detail').css('display') == 'block' ){ 
              $(this).parent().find('.detail').slideUp();
              $(this).parent().find('#titles').animate({'left' : -200});
            } else {
              $(this).parent().find('.detail').slideDown();
              $(this).parent().find('#titles').animate({'left' : 0});
            }
​
        });
      
    });
Output 300px

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

Dismiss x
public
Bin info
giacomopaitapro
0viewers