Show hide list

Developer
Bottomline Interactive
Size
2,760 Kb
Views
28,336
  1. Show hide list Previews
  2. Show hide list HTML Codes
  3. Show hide list CSS Codes
  4. Show hide list JS Codes

How do I make an show hide list?

What is a show hide list? How do you make a show hide list? This script and codes were developed by Bottomline Interactive on 25 September 2022, Sunday.

Show hide list Previews
IQ Test

Show hide list - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Show hide list</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .rcol-2col { float: left; width: 340px; margin: 0 20px 0 0; position: relative;
}
.rcol-2col-header { background: #e1e1e1; font: 400 14px/1.5 'Trebuchet MS'; color: #7d7d7f; height: 25px; padding: 10px 20px; z-index: 5; position: relative; cursor: pointer;
}
.rcol-2col-header span { float: left;
}
.show-hide { float: right;
}
.rcol-2col-body { font-size: 13px; background: #fff; display: none;
}
.rcol-2col-body tr:hover { background: #f1f1f1; cursor: pointer;
}
.rcol-2col-body td { padding: 10px 20px; border: 1px solid #ccc;
}
.rcol-2col-body-tr-even { background: #f6f6f6;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="rcol-2col"> <div class="rcol-2col-header clearfix"> <span>BOOK A TEST DRIVE</span> <div class="show-hide">Hide</div> </div> <div class="rcol-2col-body"> <table width="340" border="0" cellspacing="0" cellpadding="0"> <tr class="rcol-2col-body-tr-even"> <td width="140">Stocktype</td> <td width="200">Used</td> </tr> <tr> <td>Make</td> <td>Lad Cruiser</td> </tr> <tr class="rcol-2col-body-tr-even"> <td>Model</td> <td>2.0 tfsi quattro s-tronic</td> </tr> <tr> <td>Range</td> <td>Q5</td> </tr> <tr class="rcol-2col-body-tr-even"> <td>Mileage</td> <td>4000 km’s</td> </tr> <tr> <td>Price</td> <td>R000 000</td> </tr> <tr class="rcol-2col-body-tr-even"> <td>Dealer</td> <td>Cape Town</td> </tr> <tr> <td>Colour</td> <td>Meteor Grey</td> </tr> </table> </div> </div>
<div class="rcol-2col"> <div class="rcol-2col-header clearfix"> <span>BOOK A TEST DRIVE</span> <div class="show-hide">Hide</div> </div> <div class="rcol-2col-body"> <table width="340" border="0" cellspacing="0" cellpadding="0"> <tr class="rcol-2col-body-tr-even"> <td width="140">Stocktype</td> <td width="200">Used</td> </tr> <tr> <td>Make</td> <td>Lad Cruiser</td> </tr> <tr class="rcol-2col-body-tr-even"> <td>Model</td> <td>2.0 tfsi quattro s-tronic</td> </tr> <tr> <td>Range</td> <td>Q5</td> </tr> <tr class="rcol-2col-body-tr-even"> <td>Mileage</td> <td>4000 km’s</td> </tr> <tr> <td>Price</td> <td>R000 000</td> </tr> <tr class="rcol-2col-body-tr-even"> <td>Dealer</td> <td>Cape Town</td> </tr> <tr> <td>Colour</td> <td>Meteor Grey</td> </tr> </table> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Show hide list - Script Codes CSS Codes

.rcol-2col { float: left; width: 340px; margin: 0 20px 0 0; position: relative;
}
.rcol-2col-header { background: #e1e1e1; font: 400 14px/1.5 'Trebuchet MS'; color: #7d7d7f; height: 25px; padding: 10px 20px; z-index: 5; position: relative; cursor: pointer;
}
.rcol-2col-header span { float: left;
}
.show-hide { float: right;
}
.rcol-2col-body { font-size: 13px; background: #fff; display: none;
}
.rcol-2col-body tr:hover { background: #f1f1f1; cursor: pointer;
}
.rcol-2col-body td { padding: 10px 20px; border: 1px solid #ccc;
}
.rcol-2col-body-tr-even { background: #f6f6f6;
}

Show hide list - Script Codes JS Codes

 // infoWraps Show Hide // $(".rcol-2col-header").click (function(){ // Close all open windows // $(".rcol-2col-body").stop().slideUp(300); // Toggle this window open/close $(this).next(".rcol-2col-body").stop().slideToggle(300); if ($(this).children('.show-hide').text() == 'More +') { $(this).children('.show-hide').text('Less -'); } else { $(this).children('.show-hide').text('More +'); } });
Show hide list - Script Codes
Show hide list - Script Codes
Home Page Home
Developer Bottomline Interactive
Username BottomlineInteractive
Uploaded September 25, 2022
Rating 3
Size 2,760 Kb
Views 28,336
Do you need developer help for Show hide list?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bottomline Interactive (BottomlineInteractive) Script Codes
Name
CSS Page Curl Shadows
Calculator
Cut and Paste Roll Link
Center align div
Unusual Underline
IE10 Conditional Statement
Simple Waypoint Example
Custom Animated Select Box
A Pen by Bottomline Interactive
Cut N Paste Css Boxes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!