I want to have the navigation bar I made convert to a dropdown-menu when viewed on a smaller screen (like phones and tablets). The problem is, I didn't use the conventional bootstrap nav bar system, and just made my own. I know that the usual bootstrap solution involves using the nav classes, but I'm not really sure how I'd integrate those into my own code since I didn't use them to begin with. For tablets, I was hoping to have the main menu buttons hide into a dropdown menu with a toggle button, while keeping the logo there. Here is my code:
<header class="main-header" id="Navigation">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png">
</div>
<div class="col-md-6 text-center">
<div class="row text-center">
<div class="col-md-2 offset-md-1">
<p class="NavBarButtons"> WHY US </p>
</div>
<div class="col-md-2">
<p class="NavBarButtons"> FIX YOUR BILL </p>
</div>
<div class="col-md-2">
<p class="NavBarButtons"> HOW IT WORKS </p>
</div>
<div class="col-md-2">
<p class="NavBarButtons"> LEARN WITH US </p>
</div>
<div class="col-md-2">
<p class="NavBarButtons"> COMMERCIAL </p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3 offset-md-4">
<p class="NavBarButtons"> LOG IN </p>
</div>
<div class="col-md-4 md-offset-3">
<button class="SignUp"><b> UNLOCK YOUR POWER </b></button>
</div>
</div>
</div>
</div>
</div>
</header>
Since I used the grid system, everything collapses pretty well until a certain point, then the entire header completely messes up and stacks, which is why I wanted to try having the menu buttons go into a dropdown menu when that breakpoint is reached. Any help at all is much appreciated. Thanks!
You lose a lot of baked-in functionality when you try to do this outside a .navbar but it's manageable. The .navbar-collapse component itself isn't directly tied to the use of the larger component; you just need to include the <button> and wrapper element for the collapse:
<header class="main-header" id="Navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png">
</div>
<div class="col-xs-9 text-right">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
</button>
</div>
<div class="collapse navbar-collapse text-center" id="menu-collapse">
<div class="col-md-2"><p class="NavBarButtons">WHY US</p></div>
<div class="col-md-2"><p class="NavBarButtons">FIX YOUR BILL</p></div>
<div class="col-md-2"><p class="NavBarButtons">HOW IT WORKS</p></div>
<div class="col-md-2"><p class="NavBarButtons">LEARN WITH US</p></div>
<div class="col-md-2"><p class="NavBarButtons">COMMERCIAL</p></div>
<div class="col-md-1"><p class="NavBarButtons">LOG IN</p></div>
<div class="col-md-1"><button class="SignUp"><b>UNLOCK YOUR POWER</b></button></div>
</div>
</div>
</div>
</div>
</div>
</header>
...
Where you run into problems (and why I would recommend using the whole .navbar structure, is that you need to style the aforementioned button and its various states. You'll also need to address spacing concerns (the dropdown pushes elements down in this fashion).
It's pretty nasty, but.. You could do it with some adjustments to your code so that you'll end up with this:
<nav class="main-header navbar navbar-default" id="Navigation">
<div class="container-fluid">
<div class="col-md-3 navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png" style="width: auto;">
</a>
</div>
<div class="col-md-6 text-center collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="text-center nav navbar-nav">
<li class="col-md-2 offset-md-1">
<p class="NavBarButtons"> WHY US </p>
</li>
<li class="col-md-2">
<p class="NavBarButtons"> FIX YOUR BILL </p>
</li>
<li class="col-md-2">
<p class="NavBarButtons"> HOW IT WORKS </p>
</li>
<li class="col-md-2">
<p class="NavBarButtons"> LEARN WITH US </p>
</li>
<li class="col-md-2">
<p class="NavBarButtons"> COMMERCIAL </p>
</li>
</ul>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3 offset-md-4">
<p class="NavBarButtons"> LOG IN </p>
</div>
<div class="col-md-4 md-offset-3">
<button class="SignUp"><b> UNLOCK YOUR POWER </b></button>
</div>
</div>
</div>
</div>
</nav>
Here's what I did:
give the col-md-3 class navbar-header
In there add
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Add <a class="navbar-brand" href="#"> around your img
the col-md-6 column, add classes collapse navbar-collapse and
id="bs-example-navbar-collapse-1"
The div in that one add classes nav navbar-nav
Make the header a nav element
Give the nav classes navbar navbar-default
Remove the row
The div in the col-md-6 column, remove the row and make it an ul
Turn the divs in there into lis
Basically what you have done now is take the steps necessary to write a bootstrap nav. Take a good look at the example at http://getbootstrap.com/components/#navbar
You'll see that it actually doesn't use the grid system.
Keep in mind you need to include the bootstrap javascript to be able to use toggle functionality.
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Also also, don't put p elements in your navigation. Paragraphs don't make any sense there.
Related
I'm just getting started trying to make a new bootstrap site and want to have the search bar as part of a seperate collapse toggle. Essentially on the right of the navbar I want the search bar toggle and then the menu toggle.
I have the following questions:
How can I alight the two buttons so they sit next to each other on the right side? One of them seems to sit in the middle right now and I'm not sure why.
Since I separated the form into a different DIV it seems to not align to the right side of the page anymore, it is indented a bit. Why is that?
I only one of the collapsed menus to be open at a time. E.g. if the search is open and I tap the menu toggle I want it to close the search and vice versa.
This is what I have so far. I know it's near default but I'm just getting started and am quite new to bootstrap.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap - Prebuilt Layout</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSearch">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-4">Bootstrap with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="container">
<div class="row text-center">
<div class="col-lg-6 offset-lg-3">Click outside the blue container to select this <strong>row</strong>. Columns are always contained within a row. <strong>Rows are indicated by a dashed grey line and rounded corners</strong>. </div>
</div>
<br>
<hr>
<br>
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/card-img.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<br><br>
Go somewhere
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
<br>
<br/>
<div class="card">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/card-img.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some text to build on the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
</ul>
<div class="card-body">
Card link
Another link
</div>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class=" col-md-4"> Click here to select this<strong> column.</strong> Always place your content within a column. Columns are indicated by a dashed blue line. </div>
<div class="col-md-4 "> You can <strong>resize a column</strong> using the handle on the right. Drag it to increase or reduce the number of columns.</div>
<div class="col-md-4 "> You can <strong>offset a column</strong> using the handle on the left. Drag it to increase or reduce the offset. </div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-md-6 text-center">
<div class="card">
<div class="card-body">
<h3>Adding <strong>Buttons</strong></h3>
<p>Quickly add buttons to your page by using the button component in the insert panel. </p>
<button type="button" class="btn btn-info btn-md">Info Button</button>
<button type="button" class="btn btn-success btn-md">Success Button</button>
</div>
</div>
</div>
<div class="text-center col-md-6">
<div class="card">
<div class="card-body">
<h3>Adding <strong>Badges</strong></h3>
<p>Using the insert panel, add badge to your page by using the badge component.</p>
<span class="badge badge-info">Info Badge</span> <span class="badge badge-danger">Danger Badge</span>
</div>
</div>
</div>
</div>
<br>
<hr>
<div class="row">
<div class="text-center col-lg-6 offset-lg-3">
<h4>Footer </h4>
<p>Copyright © 2020 · All Rights Reserved · <a href="#" >My Website</a></p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>
1.: Simply add them to a separate node. The container has a flex-settings set, which align the child-nodes to fill 100% width with automatical spacing.
To overcome this, a new child node or different flex-settings are required.
<div class="container">
<a class="navbar-brand" href="#">Demo</a>
<div>
<a ...></a>
<a ...></a>
</div>
</div>
I mentioned this behavior some time ago here.
2.: The class .container adds margin to the left and right side and is flex-container, which varies by the break-point. Other classes like .row compensate this and use negative values to rearrange the content.
Bootstrap also offers example which will help you with the alignment in the navbar using ml-auto.
3.: If you want to open only one at a time, you should combine the buttons with the tab-handling. The accordion example might be the right choice. In the end it doesn't matter where you place the buttons or links, as long as the ids match with the content they have to display.
I am using Bootstrap 4 in my project and I seem to be having a problem keeping a div with the class "sticky-top" just under a fixed navbar. I've tried using javascript to replace the css on scroll, but that doesnt seem to work. I know there is a way to set an id to the navbar and tell it not to scroll past that point, but I cant seem to Google well enough to find the solution. Any help is greatly appreciated.
Below is the code I am using.
<header class="header_area">
<nav class="navbar navbar-expand-lg menu_one menu_four">
<div class="container">
<a class="navbar-brand sticky_logo" href="#"><img src="images/upayify-logo-white.png" srcset="images/logo2x-2.png 2x" alt="logo"><img src="images/upayify-logo.png" srcset="images/logo2x.png 2x" alt=""></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="menu_toggle">
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>
<span class="hamburger-cross">
<span></span>
<span></span>
</span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav menu w_menu ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<i class="fa fa-home"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
How It Works
</a>
</li>
</ul>
</div>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-lock"></i> Login</a>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-user-plus"></i> Sign Up</a>
</div>
</nav>
<div class="row row-eq-height featured_item">
<div class="col-md-5 send-card order-md-last">
<div id="get-started" class="card sticky-top">
<div class="card-body">
<form>
<div class="row">
<div class="col-12 form-group">
<label for="exampleInputEmail1">I'm sending money from...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-us"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12 form-group mt-2 mb-0">
<label>I'm sending to...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-in"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12">
<hr>
</div>
<div class="col-12 mb-3 text-center conversion">
<span class="flag-icon flag-icon-us mr-2"></span>1 <span class="mr-2 ml-2">=</span> <span class="flag-icon flag-icon-in mr-2"></span>69.64
</div>
<div class="col-12 mt-2 index-form-btn">
<i class="fa fa-rocket"></i> Get Started Now!
</div>
<div class="col-12 text-center">
<p class="small">View Terms & Conditions for more details and fees</p>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-7 d-flex order-md-first">
<div class="row">
</div>
</div>
</div>
.send-card{
top: -225px;
z-index: 4;
margin-bottom: -200px;}
The div you want under the navbar can get styled with top: ##px; (where ## is the pixel height of the navbar you want it to go under). And then also add either position: sticky; or position: fixed; depending whether you want the sticky behavior or the fixed behavior.
Here's a jsfiddle with the described sticky behaviour.
I have this template of code here and I want to make the panel in the center column full height of the visible page. Keyword 'visible' page. And then I want to place the button at the bottom of that panel, while the rest of the panels elements are at the top.
I tried setting the div to 'height: 100vh' but it makes the div higher then the visible page. I'm not sure why, maybe it has something to do with the navbar at the top?
The desired effect is that I will always see the button at the bottom of the page, regardless of the page size.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Messages
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile
</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests
</p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
×
<p><strong>Ey!</strong>
</p>
People are looking at your profile. Find out who.
</div>
<p>Link
</p>
<p>Link
</p>
<p>Link
</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left" style="height:100vh">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong>
</p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
Yeah as you already said, the navbar is the "problem" here.
If you try to subtract the navbar height from the desired height of the panel it should work:
element.style {
height: calc(100vh - 100px);
}
I have the following page menu
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container">
<div class="row">
<div class="col-xs-11 col-xs-offset-1" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
My logo
</div>
</div>
<div class="navbar-collapse collapse">
<div class="navbar-right">
<ul class="nav navbar-nav">
<li><div class="some_class" style="margin: auto;"></div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
also I have the following bootstrap carousel:
<div id="carusel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox" >
<div class="active item" id="item1">
<img class="new" src="../image1.png" style="min-height:496px;max-height: 896px;width: 100%" alt="...">
<div class="carousel-content">
<div class="row">
<div class="col-xs-11 col-xs-offset-1" >
<div class="col-md-8 center-block" >
Content1
</div>
<div class="col-md-8 center-block" >
Content2
</div>
</div>
</div>
Menu consists of left part and right part.
There is a content placed over my carousel.
The content consists of left column and right column.
How can the left column be placed just below the left part of menu(the same X coordinate), and the right column be placed just below right part of menu. (The same Y coordinate).
Telling in another words:
How can I place "Content 1" just below the "My Logo" of menu. I mean place them in a way, that they both will have the same x coordinate, the same left margin.
So I want to align content of my carousel according to bootstrap menu.
I have to place my accordion in a <div style="display:none;"> and then div which also have an id tag ( <div id="outerid"> ) because I am popping up my accordion by tooltip.js, where <div id="outerid"> defines the target for tooltip.js.
My tabs
( <a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab2">HOVER ME FOR TAB 2</a> ) works fine out of <div style="display:none;">, even within <div id="outerid">. As soon as i place <div id="outerid"> with in <div style="display:none;"> the following happening.
My accordion shows up beautifully when you hover over outerid's target,
but the tabs in the accordion do not work.
(NOTE: If I have an external target e.g href="http://helloworld.com in that case,the tabs work, but with anchor target e.g href="#tab2", they don't.
Anyone has any idea why is that?
<div style="display:none;">
<div id="outerid">
<div id="accordion">
<div class="accordion-group panel">
<a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab1">
HOVER FOR TAB 1
</a>
<div id="tab1" class="collapse in">
<div class="accordion-body">
<p>HELLO WORLD 1st</p>
</div>
</div>
</div>
<div class="accordion-group panel">
<a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab2">
HOVER ME FOR TAB 2
</a>
<div id="tab2" class="collapse">
<div class="accordion-body">
<p>HELLO WORLD 2nd </p>
</div>
</div>
</div>
<div class="accordion-group panel">
<a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab3">
HOVER ME FOR TAB3
</a>
<div id="tab3" class="collapse">
<div class="accordion-body">
<p>HELLO WORLD 3rd</p>
</div>
</div>
</div>
</div>
</div>
<!---End Accordion---->
</div>
<!--- Outerid end---->
</div><!---End Non Display--->