Bootstrap Snippet Stylish Tab Inside Popup using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<div class="container">
    <div class="row">
        <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        <div class="modal fade small-popup in" id="menu-filter" role="dialog" style="display: block; padding-right: 17px;">
  <div class="modal-dialog"> 
    
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <div class="foodlistmodal-container">
          <div class="option-holder">
            
                  <div class="foodchef-tab-container">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 foodchef-tab-menu">
                          <div class="list-group">
                              <a href="#" class="list-group-item text-center">
                                  <h4 class="fa fa-filter"></h4><br>Main Heading
                              </a>
                              <a href="#" class="list-group-item text-center active">
                                  <h4 class="fa  fa-users"></h4><br>Put The Suitable Heading Here 
                              </a>
                              <a href="#" class="list-group-item text-center">
                                  <h4 class="fa fa-cubes"></h4><br>Put The Suitable Heading Here 
                              </a>
                              <a href="#" class="list-group-item text-center">
                                  <h4 class="fa fa-cutlery"></h4><br>The Main Heading
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    color: #727272;
}
.foodlistmodal-container{
    width: 100%;
    margin: 0 auto;
    border-radius: 2px;
    overflow: hidden;
    font-family: roboto;}
/*  foodchef tab */
div.foodchef-tab-container{
 -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
}
div.foodchef-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.foodchef-tab-menu div.list-group{
  margin-bottom: 0;
}
div.foodchef-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.foodchef-tab-menu div.list-group>a .fa,
div.foodchef-tab-menu div.list-group>a .fa {
  color: #7C4DFF;
}
div.foodchef-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
        $(document).ready(function () {
            $("div.foodchef-tab-menu>div.list-group>a").click(function (e) {
                e.preventDefault();
                $(this).siblings('a.active').removeClass("active");
                $(this).addClass("active");
                var index = $(this).index();
                $("div.foodchef-tab>div.foodchef-tab-content").removeClass("active");
                $("div.foodchef-tab>div.foodchef-tab-content").eq(index).addClass("active");
            });
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Stylish Tab Inside Popup"
Bootstrap 3.3.0 Snippet by Scordavis

Related: See More

Questions / Comments:

"Stylish Tab Inside Popup" Bootstrap 3.3.0 Snippet by Scordavis

Related: See More

Questions / Comments:

"Stylish Tab Inside Popup"
Bootstrap 3.3.0 Snippet by Scordavis