Hide Div Inside of Tabs

by nickadeemus2002

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div class="main">
    <div class="slides">Slides division</div>
    
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">tab1</a></li>
            <li><a href="#tabs-2">tab2</a></li>
            <li><a href="#tabs-3">tab3</a></li>            
        </ul>
        <div id="tabs-1">
            <div class="inner_panel">
                <p>panel 1 content here</p>
            </div>
        </div>
        <div id="tabs-2">
             <div class="inner_panel">
                 <p>panel 2 content here</p>                 
            </div>
        </div>
        <div id="tabs-3">
             <div class="inner_panel">
                 <p>panel 3 content here</p>
            </div>
        </div>
    </div>
</div>

CSS

.inner_panel{height:350px;}

JavaScript

$(document).ready(function() {
    $('#tabs').tabs();


    $('li.ui-tabs-selected a').on({
        click: function(e) {
             e.preventDefault();
            // do something on click
            var tab_name = $(this).html();
            alert('you just fired off a click event on the active tab by clicking on this tab: ' + tab_name);
       $(this).dequeue();
        }
    });


});