Develop Reference

Bootstrap Wizard Issues

I am trying to use the twitter bootstrap wizard (http://vinceg.github.io/twitter-bootstrap-wizard/) and for some reason when the first tab/pill the next button is showing that it is disabled. The button does work when I click on it, but it doesn't appear to be fully active.
Here is video of the functionality I am seeing. You will notice that when the tab first opens tab 1 is selected. The progress bar is a 0% and the next button is showing disabled. When I click next it does move to the next tab. When I go back to the first tab, the progress bar has the correct width for tab 1 and now the next button for tab 1 is no longer disabled. Ideally I would like this functionality to work from the beginning.
YouTube Video:
https://youtu.be/zq9yCCUJQ68
HTML:
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li><a id="mywebsitesLink" data-toggle="tab" href="#mywebsites">My Websites</a></li>
<li><a data-toggle="tab" href="#billing">Billing</a></li>
<li><a data-toggle="tab" href="#suppport">Support</a></li>
<li><a data-toggle="tab" href="#newWebsite">Add a new website</a></li>
</ul>
<div class="tab-content">
<div id="mywebsites" class="tab-pane fade">
<!-- <div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>-->
</div>
<div id="billing" class="tab-pane fade">
<h3>Billing</h3>
<p>Some content in menu 2.</p>
</div>
<div id="suppport" class="tab-pane fade">
<h3>Support</h3>
<p>Some content in menu 2.</p>
</div>
<div id="newWebsite" class="tab-pane fade">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills" id="myTab">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
'onTabShow': function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard .progress-bar').css({width:$percent+'%'});
},
'tabClass': 'nav nav-pills',
'onNext': function(){alert("You hit next");}
});
});

I think the issue is happening because it is within another tab pane. I tried to append the HTML using JQuery using this and it seems to have resolved the issue.

Disable first form and open another form to insert data.. all this i have to do in same page?

Disable first form and open another form to insert data.. all this i have to do in same page how to do that ?
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the another section of same page
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the code.....when i successfully insert data after clicking submit button in first form ..i want the first form to be disable and 2 form should be enabled for inserting data !

Here is a simple way to do so using jquery :
First set the second form to be display:none by default then detect the function submit of the first form then show the second and hide the first using jQuery Effects - Fading :
With jQuery you can fade elements in and out of visibility.
jQuery fadeIn()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeTo()
$(function(){
$('#first button').on('click',function(){
/* your code */
$('#first').css('pointer-events','none');
$('#second').fadeIn();
});
$('#second button').on('click',function(){
/* your code */
$('#second').css('pointer-events','none');
$('#first').fadeIn();
})
})
section {
Width:100%;
height:200px;
}
#first {
background-color:blue;
}
#second{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section id="first">
<div>
<button>Submit</button>
</div>
</section>
<section id="second" style="display:none">
<div>
<button>Submit</button>
</div>
</section>

Accordion doesn't work in Bootstrap 4 collapse

https://fiddle.jshell.net/8v72rtxb/
I have the following code.
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#studies-collapse" aria-expanded="false" aria-controls="collapseExample">
Studies
</a>
<div class="collapse" id="studies-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#research-collapse" aria-expanded="false" aria-controls="collapseExample">
Research
</a>
<div class="collapse" id="research-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>
I have no idea why data-parent doesn't work though. Expand one collapse div doesn't close the other collapse. I tried to copy the code from the example of bootstrap, but it still doesn't work.
Also in my project, I include jquery.js before bootstrap.min.js. I have checked some other questions, they said that bootstrap.min.js might have been included twice. But should that be the case?
Thanks for reading!

I figured a workaround for this. Even without using the data-parent attribute.
https://fiddle.jshell.net/zyd1vL4o/
$(document).ready(function(){
$('.collapse').on('show.bs.collapse', function (e) {
$('.collapse').collapse("hide")
})
})

Once go through this jsfiddle
And here is html code,
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Studies
</a>
</h5>
</div>
<div id="collapseOne" class="collapse " role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div id="studies-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Research
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div id="research-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Use:
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed" data-target="#studies-collapse" href="#studies-collapse" aria-expanded="false" aria-controls="studies-collapse">
Studies
</a>
<div class="collapse" id="studies-collapse" data-parent="#menu">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed" data-target="#research-collapse" href="#research-collapse" aria-expanded="false" aria-controls="research-collapse">
Research
</a>
<div class="collapse" id="research-collapse" data-parent="#menu">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>

import 'bootstrap/js/dist/collapse';
Include this in your file and the collapse should work.

If its not closing, then you might not be properly linking to to your bootstrap js. You shouldn't need to add anything extra.
check for the following js files:
bootstrap.min.js
bootstrap.bundle.min.js
If you're creating a bootstrap theme then in the functions do this:
wp_register_script( 'write your theme name here', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );

JQuery filtering a website onClick to remove certain divs or sections

I have a blog style website that I've placed a dropdown button at top of for the purpose of filtering the content. Each blog post will reside in section tags.
When user clicks on menu item it will trigger click event. I'm trying to save the href which the code seems to do fine.
Then i was hoping to iterate each a tag with the class of "label".
With each one that is found it should check the text and compare to value from dropdown box. If it matches keep the content. If not detach it. I thought detach was the best method since I would need to put it back on refresh and/or if user clicks on another selection in the dropdown.
Here's what I tried:
<div class="container blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" id="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" id="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" id="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" id="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive" />
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
JQuery:
<script>
$("a[role='sortmenuitem']").bind("click", function() {
var value = $(this).attr( 'id' );
$("a.label").each(function() {
if (this.text('value')) {
this.replace();
}
else {
this.detach();
}
});
});
</script>
If there is a better approach all together, I am all ears.
I thought about giving each blog section a class matching its category, and then using CSS to hide the element. If I am in the right ballpark please let me know.
Furthermore, once we hide the section not matching the dropdown menu item that is selected I'd need to put it back if another element is selected.
I am new (obviously) to JQuery. Any "dumbed down" explanation would be greatly appreciated!

I assume you want to hide/show the blog-post according to the current dropdown selection.
For the first, you need to change this line:
$("a.label")
to:
$(".blog-post .label")
because the label is associated to the span element under the blog-post section.
In order to test a value against a text you need to change this line:
this.text('value')
with:
$(this).text()
In order to hide/show the section inside the each loop you have to search for the closest blog-post parent section.
I added e.preventDefault() inside the click to stop navigation.
Moreover, as reported in the comment (Khalid T), instead to use bind you have to use on because its usage is deprecated.
So the snippet is:
$("a[role='sortmenuitem']").on("click", function(e) {
e.preventDefault();
var value = $(this).attr( 'href' );
$(".blog-post .label").each(function() {
$(this).closest('.blog-post').toggle($(this).text() == value);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" href="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" href="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" href="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" href="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive"/>
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>

Semantic UI. How to initialize a pop-up on an element?

I'm new with Sematic UI and jQuery, and I want to show a pop-up when I click on button "Browse1", not on "Browse2" or "Browse3.
But the pop-up also shows when I click anywhere on my menu. How can I restrict the pop-up, so it only displays when clicking on "Browse1"?
Why doesn't the following work?
$(".ui.menu").find("a:first").popup({on: 'click'});
Here's my code:
$(".ui.menu").popup({on: 'click'});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>
<div class="ui menu">
<a class="browse item">
Browse1 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse2 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse3 <i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup bottom left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>

You need to use the Semantic UI way of assigning a popup to the menu element (in your case the first item). Check this script below I wrote for you.
$('.ui.menu .item:first-child').popup({
popup : $('.ui.popup'),
on : 'click'
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>
<div class="ui menu">
<a class="browse item">
Browse1 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse2 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse3 <i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup bottom left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>