"show more on click"
Bootstrap 3.3.0 Snippet by govs

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Action</th> </tr> <tr> <td>John</td> <td>Doe</td> <td><a href="#" id="example-show" onclick="showHide('example');return false;" class="showLink btn bN-btn-base bN-btn-small">View More</a></td> </tr> <tr> <td colspan="3"> <div id="example" class="more"> <p>John Doe is a man</p> <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p> </div> </td> </tr> <tr> <td>Jane</td> <td>Doe</td> <td><a href="#" id="example-show" onclick="showHide('exampleFemale');return false;" class=" showLink btn bN-btn-base bN-btn-small">View More</a></td><!-- Note the change in the showHide() function --> </tr> <tr> <td colspan="3"> <div id="exampleFemale" class="more"><!-- Note the change in the ID --> <p>Jane Doe is a woman</p> <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('exampleFemale');return false;">Hide this content.</a></p><!-- Note the change in the showHide() function --> </div> </td> </tr> </table>
.more { display: none; } a.showLink, a.hideLink { text-decoration: none; color: #36f; padding-left: 8px; background: transparent url(down.gif) no-repeat left; } a.hideLink { background: transparent url(up.gif) no-repeat left; } a.showLink:hover, a.hideLink:hover { border-bottom: 1px dotted #36f; }
function showHide(shID) { if ($('#' + shID)) { if ($('#' + shID+'-show').css('display') != 'none') { $('#' + shID+'-show').css({'display':'none'}); $('#' + shID).css({'display':'block'}); } } else { $('#' + shID+'-show').css({'display':'inline'}); $('#' + shID).css({'display':'none'}); } }

Related: See More


Questions / Comments: