Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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; }
</style>
</head>
<body>    
  <div class="speech-l">
  <h4>Brands</h4>
  <ul>
     <li><a class="all" href="#"><a href="#">Hello</a></li>
        <li><a class="all" href="#"><a href="#">Hello</a></li>
           <li><a class="all" href="#"><a href="#">Hello</a></li>
              <li><a class="all" href="#"><a href="#">Hello</a></li>
                 <li><a class="all" href="#"><a href="#">Hello</a></li>
                    <li><a class="all" href="#"><a href="#">Hello</a></li>
                       <li><a class="all" href="#"><a href="#">Hello</a></li>
                          <li><a class="all" href="#"><a href="#">Hello</a></li>
                             <li><a class="all" href="#"><a href="#">Hello</a></li>
                                <li><a class="all" href="#"><a href="#">Hello</a></li>
   <li><a class="all" href="#"><a href="#">Hello</a></li>
   <li><a class="all" href="#">Joe Rocket <em>(57a)</em></a></li>
     <li><a class="all" href="#">Joe Rocket <em>(57b)</em></a></li>
     <li><a class="all" href="#">Joe Rocket <em>(57c)</em></a></li>
     <li><a class="all" href="#">Joe Rocket <em>(57d)</em></a></li>
     <li><a class="all" href="#">Joe Rocket <em>(57e)</em></a></li>
     <li><a class="all" href="#">Joe Rocket <em>(57f)</em></a></li>
   <li><a class="all" href="#">Icon <em>(42)</em></a></li>
   <li><a class="all" href="#">Fieldsheer <em>(37)</em></a></li>
   <li><a class="all" href="#">Tour Master <em>(21)</em></a></li>
   <li><a class="all" href="#">AGV Sport<em>(21)</em></a></li>
   <li><a class="all" href="#">Alpinestars<em>(21)</em></a></li>
   <li><a class="all" href="#">Cortech<em>(21)</em></a></li>
   <li><a class="all" href="#">Element<em>(21)</em></a></li>
    <li><a class="all" href="#">Element<em>(21)</em></a></li>
    <li><a class="all" href="#">Element<em>(21)</em></a></li>
    <li><a class="all" href="#">Element<em>(21)</em></a></li>
   <li><a class="all" href="#">Fieldsheer<em>(21)</em></a></li>
  </ul>
  </div>
</body>
</html>
 
$('.speech-l ul').on('click', 'li', function() {
    $(this).toggle(
        function() {
            hiddenElements.slideDown(600);
            $(this).text('...less comments');
        },
        function() {
            hiddenElements.hide();
            $(this).text(showCaption);
        }
    );
});
$('.speech-l').each(function() {
    if (ul.children('li').size() <= 3) {
        return false;
    }
    var hiddenElements = ul.children('li:gt(2)', this).hide();
    var showCaption = 'View ' + hiddenElements.size() + ' more comments...';
    ul.append('<li class="toggler">' + showCaption + '</li>');
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers