How To Create Wordpress Tapper Widget ?

Hi , Hope You Well ,  Today We Learn  Wordpress Theme Development .We will Create Tapper Widget on WordPress . Many Tapped Widget Plugin have in WordPress.org So Why We Create is Manually ? if We Create is Manually  , You Can Create as Your Wish . You Can Show There as Your Wish . So Let's Make it :

First Create New Folder , Rename it as Tapped Widget and This Code Copy and Paste new file and Rename it as a Tapped Widget.php  .

<?php
/* Plugin Name: Tabber Widget
Plugin URI: http://wpthemeinfree.blogspot.com/
Description: A simple jquery tabber widget.
Version: 1.0
Author:Tabber Widget
Author URI:  http://wpthemeinfree.blogspot.com/
License: GPL2
*/

// creating a widget
class WPBTabberWidget extends WP_Widget {

function WPBTabberWidget() {
        $widget_ops = array(
        'classname' => 'WPBTabberWidget',
        'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
        'WPBTabberWidget',
        'WPBeginner Tabber Widget',
        $widget_ops
);
}
function widget($args, $instance) { // widget sidebar output

function wpb_tabber() {

// Now we enqueue our stylesheet and jQuery script

wp_register_style('wpb-tabber-style', plugins_url('wpb-tabber-style.css', __FILE__));
wp_register_script('wpb-tabber-widget-js', plugins_url('wpb-tabber.js', __FILE__), array('jquery'));
wp_enqueue_style('wpb-tabber-style');
wp_enqueue_script('wpb-tabber-widget-js');

// Creating tabs you will be adding you own code inside each tab
?>

<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
<?php
// Enter code for tab 1 here.
?>
</div>

<div id="tab2" class="tab_content" style="display:none;">
<?php
// Enter code for tab 2 here.
?>
</div>

<div id="tab3" class="tab_content" style="display:none;">
<?php
// Enter code for tab 3 here.
?>
</div>

</div>

<div class="tab-clear"></div>

<?php

}

extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget;
$tabs = wpb_tabber();
// output tabs HTML
echo $tabs;
// post-widget code from theme
echo $after_widget;
}
}

// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>

# Then Below Code Copy paste in new file and rename it  Tabber Widget CSS.css 

ul.tabs {
position: relative;
z-index: 1000;
float: left;
border-left: 1px solid #C3D4EA;
}
ul.tabs li {
position: relative;
overflow: hidden;
height: 26px;
float: left;
margin: 0;
padding: 0;
line-height: 26px;
background-color: #99B2B7;
border: 1px solid #C3D4EA;
border-left: none;
}
ul.tabs li  a{
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
}
html ul.tabs li.active,
html ul.tabs li.active a:hover {
background-color: #D5DED9;
border-bottom: 1px solid #D5DED9;
}
.widget-area .widget .tabs a  {
color: #FFFFFF;
}
.tab_container {
position: relative;
top: -1px;
z-index: 999;
width: 100%;
float: left;
font-size: 11px;
background-color: #D5DED9;
border: 1px solid #C3D4EA;
}
.tab_content {
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul {
margin: 0;
padding: 0;
list-style: none;
}
.tab_content li {
margin: 3px 0;
 }
.tab-clear {
clear:both;
}

# Then Below Code Copy paste in new file and rename it  Tabber Widget.js

(function($)  {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(activeTab).fadeIn();}
return false;
});
})(jQuery);

Now Go To the Tapped Widget.php  and Find this
<div id="tab1" class="tab_content">
<?php
and  Enter your code for tab 1 here.what you went to show .
?>
</div>
Create ZIP Tapped Widget folder . And Install as you install Plugin .   Now Set Widget Where You Went To Show .  Also You Can Edit CSS for Style your Widget .  Enjoy .