Jquery BBQ Example - Jquery

How to code jquery bbq example?

Snippet Code

Rate this page :
  [ 0 votes]

Jquery BBQ can create multiple jquery ul tab widgets simultaneously without reloading the page. The simple jquery BBQ Code used to create widgets are given below.

<script type='text/javascript'> $(document).ready(function() { $(".litab-list a").click(function(event) { event.preventDefault(); $(this).parent().addClass("active"); $(this).parent().siblings().removeClass("active"); var litab = $(this).attr("href"); $(".description").not(litab).css("display", "none"); $(litab).fadeIn(); }); }); </script> <div id="main-litab"> <ul class="litab-list" style='height: 18px;padding:0px;'> <li class="active"><a href="#litab-1">Burgers</a></li> <li><a href="#litab-2">Chicken</a></li> <li><a href="#litab-3">Kebabs</a></li> </ul> <div class="litab"> <div id="litab-1" class="description" style='display: block;'> <div style='width:100%;'> <div style='width:70%;float:left;'> <p>A hamburger is a sandwich consisting of one or more cooked patties of ground meat, usually beef, placed inside a sliced bun.</p> </div> <div style='width:30%;float:left;'> <img src='burger.jpg' width=150px height=100px> </div> </div> </div> <div id="litab-2" class="description"> <div style='width:100%;'> <div style='width:70%;float:left;'> <p>Barbecue chicken consists of chicken parts or entire chickens that are barbecued, grilled or smoked. </p> </div> <div style='width:30%;float:left;'> <img src='chicken.jpg' width=150px height=100px> </div> </div> </div> <div id="litab-3" class="description"> <div style='width:100%;'> <div style='width:70%;float:left;'> <p>Kebab, is a Middle Eastern, Eastern Mediterranean, and South Asian dish of pieces of meat, fish, or vegetables roasted or grilled on a skewer or spit originating in the Eastern Mediterranean</p> </div> <div style='width:30%;float:left;'> <img src='kebabs.jpg' width=150px height=100px> </div> </div> </div> </div> </div> <style> .litab-list li {height: 30px;line-height: 30px;float: left;margin-right: 1px;background-color: #ccc; border-top: 1px solid #d4d4d1;border-right: 1px solid #d4d4d1;border-left: 1px solid #d4d4d1;list-style:none;} .litab-list li.active {position: relative;background-color: #fff;border-bottom: 1px solid #fff;z-index: 5;} .litab-list li a {padding: 10px;text-transform: uppercase;color: #fff;text-decoration: none; } .litab-list .active a {color: blue;} .litab {background-color: #fff;border: 1px solid #BDBDBD;float: left;margin: 0;width: auto;width: 560px;padding: 5px;} .description { display: none;} </style>


Ask Questions

Ask Question