We Keep Coding

how can we show and hide tab using checkbox

what i am trying to do that when i click on checkbox 1 and checkbox 2 then show and hide its work fine
i want when i click on both checkbox 1 and 2 then colour toggle tab red green and blue its show in up front on the add new button and when click uncheck box2 then its hide colour toggle
how can we that in below code functionality works fine but
i want to achieve colour toggle tab bar is shown in upfront of the add new button .
any help in this its very thankful .
example image link https://kapwi.ng/w/DQu7aukF what i trying to achieve in my below code https://kapwi.ng/w/DQu7aukF any one help me this
for reference image link what type i try to achieve image link example- https://ibb.co/6BWKS5c
function addDay(e) {
document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
.container-2{
display:flex}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
<input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>
<div class="container-2">
<div class="row mr-2 ml-0" style="display:none;" id="lundi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="homemade" class="container tab-pane active"><br>
<button type="button" class="btn btn-primary">ADD NEW</button>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mardi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Red</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Red</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Green</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Blue</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">test</div>
<div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
<div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
<div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
<div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

Do NOT wrap the inputs in a div, so you can do with css
#undiCheck:checked ~ #undi {
display: block;
}

First you have replace checkbox to radio button,
i modify your code add some div & change structure of your HTML
add extra some css
i hope this can solve your probleam
.menu {
max-width: 400px;
margin: 0 auto;
padding: 0;
}
.menu a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
line-height: 1;
}
label {
display: block;
margin: 0 0 2px 0;
padding :12px;
line-height: 1;
color :#fff;
background :#007bbb;
cursor :pointer;
}
input {
display: none;
}
.menu .row {
max-height: 0;
overflow-y: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.accordion:checked ~ #lundi2,
.accordion:checked ~ #mardi2,
.accordion:checked ~ #jeudi2,
.accordion:checked ~ #mercredi2 {
max-height: unset;
opacity: 1;
max-width: 100%;
}
.wrapper {
display: inline-block;
}
.menu .row {
position: absolute;
background-color: #9e9e9e;
width: 100%;
left: 0;
}
.menu {
position: relative;
}
<div class="menu">
<div class="wrapper">
<label for="lundi">01</label>
<input type="radio" name="radio" id="lundi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="lundi2">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="homemade" class="container tab-pane active"><br>
<button type="button" class="btn btn-primary">ADD NEW</button>
</div>
</div>
</div>
</div>
<div class="wrapper">
<label for="mardi" >2</label>
<input type="radio" name="radio" id="mardi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="mardi2">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Red</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Red</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Green</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Blue</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<label for="mercredi">3</label>
<input type="radio" name="radio" id="mercredi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="mercredi2">test</div>
</div>
<div class="wrapper">
<label for="jeudi">4</label>
<input type="radio" name="radio" id="jeudi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="jeudi2">Some content4</div>
</div>
</div>

How can I make a bootstrap media list with a scroll bar?

Here is my code:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body class="p-1">
<div class="p-0 container-fluid">
<div class="p-0 row h-25 no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<video id="selfView" class="h-100 w-100 position-absolute" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn btn-sm btn-lg btn-success">
TV:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareVideo" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-success">
Light:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareAudio" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-danger">
Air Cond:<span class="badge badge-danger">Off</span>
<input type="checkbox" id="shareScreen">
</label>
</div>
<div class="btn-group-toggle p-1">
<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
</div>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active"
id="pills-info-tab" data-toggle="pill"
href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
i
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-member-tab" data-toggle="pill"
href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
f
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-message-tab" data-toggle="pill"
href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
c
</a>
</li>
</ul>
<div class="tab-content border border-success position-relative" id="pills-tabContent">
<div class="tab-pane fade p-0 show active " id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
<ul class="list-unstyled overflow-auto h-100">
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
</ul>
</div>
<div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">
2
</div>
<div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How can I make the bootstrap media list(i.e line 81) with a scroll bar?
I have using a "position-relative" and "position-absolute" class to make the browser show a scroll bar.
Unfortunately, it does not work.
It is because when I browse the web page with a mobile phone the media list is too long.

Use CSS, place this into the empty <style></style> tag, and remove the overflow-auto h-100 classes from the ul.
#pills-info {
height: calc(100vh - 100px);
overflow-y: scroll
}

The scrollbar can be added by using a CSS class with these 2 attributes:
overflow-y: scroll
max-height: height;
An example CSS class for scroll bar:
.scroll-bar {
overflow-x: scroll;
overflow-y: scroll;
max-height: 100px;
}
Here is the working example with CSS class added to the list:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
.scroll-bar {
overflow-x: scroll;
overflow-y: scroll;
max-height: 100px;
}
</style>
</head>
<body class="p-1">
<div class="p-0 container-fluid">
<div class="p-0 row h-25 no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<video id="selfView" class="h-100 w-100 position-absolute" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn btn-sm btn-lg btn-success">
TV:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareVideo" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-success">
Light:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareAudio" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-danger">
Air Cond:<span class="badge badge-danger">Off</span>
<input type="checkbox" id="shareScreen">
</label>
</div>
<div class="btn-group-toggle p-1">
<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
</div>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active"
id="pills-info-tab" data-toggle="pill"
href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
i
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-member-tab" data-toggle="pill"
href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
f
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-message-tab" data-toggle="pill"
href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
c
</a>
</li>
</ul>
<div class="tab-content border border-success position-relative" id="pills-tabContent">
<div class="tab-pane fade p-0 show active" id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
<ul class="list-unstyled overflow-auto h-100 scroll-bar">
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
</ul>
</div>
<div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">
2
</div>
<div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:

Can't get all html code by using execute_script in Python for web scraping

I am trying to get html code for web scraping using Python. I chose a website of the real estate agency.
Before doing onclick event of the button that change pages I need to get this element itself.
However buttons that let us go to the next or previous page (designed with symbols ">" and "<") are not displayed inside the code.
Could you please advice something on this issue.
Here is my code
from selenium import webdriver
from bs4 import BeautifulSoup as bs
import requests
browser = webdriver.Chrome()
url = "https://www.centris.ca/en/properties~for-sale?view=Thumbnail"
browser.get(url)
innerHTML = browser.execute_script("return document.body.innerHTML")
print(innerHTML)

You were almost there. You simply need to induce WebDriverWait for the desired elements to be visible and then extract the html / page source as follows:
Code Block:
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
options = Options()
options.add_argument("start-maximized")
options.add_argument("disable-infobars")
options.add_argument("--disable-extensions")
driver = webdriver.Chrome(chrome_options=options, executable_path=r'C:\Utility\BrowserDrivers\chromedriver.exe')
driver.get("https://www.centris.ca/en/properties~for-sale?view=Thumbnail")
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div.wrapper.even.wrapper-results")))
print(driver.execute_script("return document.body.innerHTML"))
Console Output:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-558V6M" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-NC4N8H6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
<div id="site" itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Centris.ca">
<meta content="https://www.facebook.com/centris.ca/" itemprop="sameAs">
<meta content="Centris.ca lists all of the properties for sale or rent by a real estate broker in Québec. Find your house, condo, lot, plex, business..." itemprop="description">
<header id="header">
<div id="header-wrapper" class="wrapper">
<div class="top-nav" role="navigation">
<a class="logo-container" itemprop="url" href="/en">
<img itemprop="logo" src="/master/images/logo-centris-small.gif" alt="Centris.ca">
<strong>The Largest Number of Homes for Sale</strong>
</a>
<nav class="menu-container">
<ul class="main-menu">
<li>
<a class="main-item" href="/en/buy">Buy</a>
<div class="submenu">
<ul class="purchase">
<li class="first"><span class="item-title">Find a property</span></li>
<li class="second"><span class="item-title">Buying with a broker</span></li>
<li class="third"><span class="item-title">Steps involved in buying</span></li>
<li class="fourth"><span class="item-title">Risks of buying without a broker</span></li>
</ul>
</div>
</li>
<li>
<a class="main-item" href="/en/sell">Sell</a>
<div class="submenu">
<ul class="sale">
<li class="first"><span class="item-title">Selling with a broker</span></li>
<li class="second"><span class="item-title">Steps involved in selling</span></li>
<li class="third"><span class="item-title">Risks of selling without a broker</span></li>
</ul>
</div>
</li>
<li>
<a class="main-item" href="/en/my-real-estate-broker">My broker</a>
<div class="submenu">
<ul class="broker">
<li class="first"><span class="item-title">Find a broker</span></li>
<li class="second"><span class="item-title">The role of the broker</span></li>
<li class="third"><span class="item-title">The 10 qualities of a good broker</span></li>
<li class="fifth"><span class="item-title">What clients are saying</span></li>
<li class="last"><span class="item-title">Become a broker</span></li>
</ul>
</div>
</li>
<li>
<a class="main-item" href="/en/tools">Tools</a>
<div class="submenu">
<ul class="infos">
<li class="first"><span class="item-title">Community profile</span></li>
<li class="second"><span class="item-title">Real estate statistics</span></li>
<li class="third"><span class="item-title">Useful links</span></li>
<li class="fourth"><span class="item-title">Real estate blog</span></li>
<li class="last"><span class="item-title">Calculator</span></li>
</ul>
</div>
</li>
<li class="property-search-icon">Search</li>
</ul>
<ul class="right-menu">
<li class="my-position-link"><i></i>Nearby</li>
<li>
My account
</li>
<li>
<a class="lang" href="/fr/propriete~a-vendre?view=Thumbnail"><span class="desktop">FR</span><span class="device">Français</span></a>
</li>
<li class="last-child">
<a class="btn-favorites favorites " href="/en/my-favourites?view=Thumbnail" title="See my favourites">
<span class="icon icon-fav enableHover"></span>
<span class="text">Favourites</span>
<span class="labelCount hidden"></span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="mobile-menu-container">
<li class="border">
My account
</li>
<li>
<div class="m-favorites">
<a class="m-fav-link link-disabled" href="/en/my-favourites?view=Thumbnail" title="See my favourites">
<span class="text">My favourites</span>
<span class="labelCount hidden"></span>
</a>
</div>
</li>
<li class="border">
Nearby
</li>
<li>
<div class="main-item">Buy</div>
<div class="submenu">
<ul>
<li>
Find a property
</li>
<li>
Buying with a broker
</li>
<li>
Steps involved in buying
</li>
<li>
Risks of buying without a broker
</li>
</ul>
</div>
</li>
<li>
<div class="main-item">Sell</div>
<div class="submenu">
<ul>
<li>
Selling with a broker
</li>
<li>
Steps involved in selling
</li>
<li>
Risks of selling without a broker
</li>
</ul>
</div>
</li>
<li>
<div class="main-item">My broker</div>
<div class="submenu">
<ul>
<li>
Find a broker
</li>
<li>
The role of the broker
</li>
<li>
The 10 qualities of a good broker
</li>
<li>
What clients are saying
</li>
<li>
Become a broker
</li>
</ul>
</div>
</li>
<li class="border">
<div class="main-item">Tools</div>
<div class="submenu">
<ul>
<li>
Community profile
</li>
<li>
Real estate statistics
</li>
<li>
Useful links
</li>
<li>
Real estate blog
</li>
<li>
Calculator
</li>
</ul>
</div>
</li>
<li class="border">
<a class="lang" href="/fr/propriete~a-vendre?view=Thumbnail">Français</a>
</li>
<li>
Broker login
</li>
</ul>
</nav>
<div class="mobileMenuButtons">
<a class="searchLink icon-search" href="/en/properties~for-sale?view=Thumbnail&OpenSearchPanel=true" aria-label="Search"></a>
<div class="menuToggle icon-menu " aria-label="Toggle navigation"></div>
</div>
</div>
<div id="search-block" role="search" class="region" style="display: none">
<div id="search-form">
<fieldset>
<fieldset class="search-field">
<div class="ie-search fields-container">
<label id="labelSearch" for="search">Search by City, Neighbourhood, Region, Address or Centris<sup>®</sup> No.</label>
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="search" name="search" id="search" class="focus ui-autocomplete-input" autocomplete="off">
</div>
<button id="submit-search" class="btn btn-search">Search</button>
</fieldset>
<div id="freeform-filters" class="filters-list">
<ul></ul>
</div>
<!-- Price -->
<fieldset id="price" class="fieldset">
<legend class="none">Price</legend>
<div class="control-group slide">
<div class="controls">
<div id="slider" data-min-price="0" data-max-price="999999999" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a></div>
<div id="slider-value"><span id="currentPrixMin" data-value="0" style="position: relative; top: 0px; left: 0px;">$0</span><span id="currentPrixMax" data-value="999999999" style="position: relative; top: 0px; left: 0px;"><span>$20,000,000+</span></span></div>
</div>
</div>
</fieldset>
<!-- Residentiel/Commerciel, Vendre/Louer -->
<fieldset id="property-category" class="fieldset">
<legend class="none">Catégorie</legend>
<div class="control-group">
<div class="control-radio first">
<button id="residentiel" class="btn btn-check active">Residential</button>
<button id="commercial" class="btn btn-check">Commercial</button>
</div>
<div class="control-radio">
<button id="avendre" class="btn btn-check active">For sale</button>
<button id="alouer" class="btn btn-check">For rent</button>
</div>
</div>
</fieldset>
<a id="btn-advanced-criterias" class="link-more-below" href="javascript:;" style="display: none;">ADVANCED CRITERIA<i></i></a>
</fieldset>
<fieldset id="container-advanced-criterias">
<!-- PropertyTypes -->
<fieldset class="fieldset fieldset-border" id="LegendItemProperty">
<legend class="none">Property type<i class="btn-toggle"></i></legend>
<div id="item-property" class="control-select-inline container-fieldset">
<button class="btn-form-choice" data-value="A">Single-family home</button>
<button class="btn-form-choice" data-value="B">Condo</button>
<button class="btn-form-choice" data-value="C">Loft / Studio</button>
<button class="btn-form-choice" data-value="D">Condominium home</button>
<button class="btn-form-choice" data-value="E">Plex</button>
<button class="btn-form-choice" data-value="F">Intergenerational</button>
<button class="btn-form-choice" data-value="G">Mobile home</button>
<button class="btn-form-choice" data-value="H">Hobby farm</button>
<button class="btn-form-choice" data-value="I">Lot</button>
<button class="btn-form-choice" data-value="J" style="display: none;">Multi-Family</button>
<button class="btn-form-choice" data-value="K" style="display: none;">Office</button>
<button class="btn-form-choice" data-value="L" style="display: none;">Industrial</button>
<button class="btn-form-choice" data-value="M" style="display: none;">Commercial</button>
<button class="btn-form-choice" data-value="N" style="display: none;">Accommodation</button>
<button class="btn-form-choice" data-value="O" style="display: none;">Agricultural</button>
<button class="btn-form-choice" data-value="P" style="display: none;">Lot</button>
<button class="btn-form-choice" data-value="Q" style="display: none;">Business</button>
</div>
</fieldset>
<!-- FEATURES SECTION -->
<fieldset class="fieldset-border" id="CharacteristicsSection">
<legend>Features<i class="btn-toggle"></i></legend>
<div class="container-fieldset">
<!-- DROPDOWNS - FEATURES SECTION -->
<fieldset id="fdChambreStat">
<legend></legend>
<div class="control-group caracteristics">
<div class="controls">
<!-- Chambres -->
<div class="control-select" id="select-room" tabindex="-1" data-visiblity-name="Rooms"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of bedrooms</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of bedrooms</li>
<li class="option" data-option-value="1">1 bedroom</li>
<li class="option" data-option-value="1+">1 bedroom or +</li>
<li class="option" data-option-value="2">2 bedrooms</li>
<li class="option" data-option-value="2+">2 bedrooms or +</li>
<li class="option" data-option-value="3">3 bedrooms</li>
<li class="option" data-option-value="3+">3 bedrooms or +</li>
<li class="option" data-option-value="4">4 bedrooms</li>
<li class="option" data-option-value="4+">4 bedrooms or +</li>
<li class="option" data-option-value="5">5 bedrooms</li>
<li class="option" data-option-value="5+">5 bedrooms or +</li>
</ul>
</div>
</div>
<!-- Salle de bain/eau -->
<div class="control-select" id="select-bathroom" tabindex="-1" data-visiblity-name="Bathrooms"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of bath/powder rooms</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of bath/powder rooms</li>
<li class="option" data-option-value="1">1 bath/powder room or +</li>
<li class="option" data-option-value="2">2 bath/powder rooms or +</li>
<li class="option" data-option-value="3">3 bath/powder rooms or +</li>
<li class="option" data-option-value="4">4 bath/powder rooms or +</li>
<li class="option" data-option-value="5">5 bath/powder rooms or +</li>
</ul>
</div>
</div>
<!-- Stationnement -->
<div class="control-select" id="select-stationnement" tabindex="-1" data-visiblity-name="Stationnement"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of parking spaces</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of parking spaces</li>
<li class="option" data-option-value="1">1 parking or +</li>
<li class="option" data-option-value="2">2 parkings or +</li>
<li class="option" data-option-value="3">3 parkings or +</li>
<li class="option" data-option-value="4">4 parkings or +</li>
<li class="option" data-option-value="5">5 parkings or +</li>
</ul>
</div>
</div>
<!-- Garage -->
<div class="control-select" id="select-garage" tabindex="-1" data-visiblity-name="Garage"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of garages</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of garages</li>
<li class="option" data-option-value="1">1 garage or +</li>
<li class="option" data-option-value="2">2 garages or +</li>
<li class="option" data-option-value="3">3 garages or +</li>
<li class="option" data-option-value="4">4 garages or +</li>
<li class="option" data-option-value="5">5 garages or +</li>
</ul>
</div>
</div>
</div>
</div>
</fieldset>
<!-- CHECKBOXS - FEATURES SECTION -->
<fieldset id="fsCaracAutre">
<legend></legend>
<div class="control-group">
<ul class="checkbox-list">
<!-- Specs -->
<li data-visiblity-name="Piscine">
<input type="checkbox" id="chk-piscine"><i></i><label for="chk-piscine" class="checkbox">Pool<span id="spanchk-piscine"></span></label>
</li>
<li data-visiblity-name="Ascenseur">
<input type="checkbox" id="chk-ascenseur"><i></i><label for="chk-ascenseur" class="checkbox">Elevator<span id="spanchk-ascenseur"></span></label>
</li>
<li data-visiblity-name="Apmr">
<input type="checkbox" id="chk-apmr"><i></i><label for="chk-apmr" class="checkbox">Adapted for reduced mobility<span id="spanchk-apmr"></span></label>
</li>
<li data-visiblity-name="BordEau">
<input type="checkbox" id="chk-bordeau"><i></i><label for="chk-bordeau" class="checkbox">Waterfront<span id="spanchk-bordeau"></span></label>
</li>
<li data-visiblity-name="AccesEau">
<input type="checkbox" id="chk-acceseau"><i></i><label for="chk-acceseau" class="checkbox">Access to waterfront<span id="spanchk-acceseau"></span></label>
</li>
<li data-visiblity-name="PlanEauNavigable">
<input type="checkbox" id="chk-planeaunavigable"><i></i><label for="chk-planeaunavigable" class="checkbox">Navigable body of water<span id="spanchk-planeaunavigable"></span></label>
</li>
<li data-visiblity-name="Meuble" style="display: none;">
<input type="checkbox" id="chk-meuble"><i></i><label for="chk-meuble" class="checkbox">Furnished<span id="spanchk-meuble"></span></label>
</li>
<li data-visiblity-name="SemiMeuble" style="display: none;">
<input type="checkbox" id="chk-semimeuble"><i></i><label for="chk-semimeuble" class="checkbox">Semi-furnished<span id="spanchk-semimeuble"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="TypeHebergement" style="display: none;">
<legend></legend>
<div class="control-group">
<ul id="type-hebergement" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="HOTEL" data-value="HOTEL"><i></i><label for="HOTEL" class="checkbox">Hotel<span id="spanTypeHebergementHOTEL"></span></label>
</li>
<li>
<input type="checkbox" id="MOTEL" data-value="MOTEL"><i></i><label for="MOTEL" class="checkbox">Motel<span id="spanTypeHebergementMOTEL"></span></label>
</li>
<li>
<input type="checkbox" id="AUBERGE" data-value="AUBERGE"><i></i><label for="AUBERGE" class="checkbox">Inn<span id="spanTypeHebergementAUBERGE"></span></label>
</li>
<li>
<input type="checkbox" id="MAISONRETR" data-value="MAISONRETR"><i></i><label for="MAISONRETR" class="checkbox">Seniors' residence<span id="spanTypeHebergementMAISONRETR"></span></label>
</li>
<li>
<input type="checkbox" id="AU" data-value="AU"><i></i><label for="AU" class="checkbox">Other<span id="spanTypeHebergementAU"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="TypeExploitation" style="display: none;">
<legend></legend>
<div class="control-group">
<ul id="type-exploitation" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="ELEVAGE" data-value="ELEVAGE"><i></i><label for="ELEVAGE" class="checkbox">Animal husbandry<span id="spanTypeExploitationELEVAGE"></span></label>
</li>
<li>
<input type="checkbox" id="APICULTURE" data-value="APICULTURE"><i></i><label for="APICULTURE" class="checkbox">Beekeeping<span id="spanTypeExploitationAPICULTURE"></span></label>
</li>
<li>
<input type="checkbox" id="FERMELAIT" data-value="FERMELAIT"><i></i><label for="FERMELAIT" class="checkbox">Dairy farm<span id="spanTypeExploitationFERMELAIT"></span></label>
</li>
<li>
<input type="checkbox" id="SERRES" data-value="SERRES"><i></i><label for="SERRES" class="checkbox">Greenhouses<span id="spanTypeExploitationSERRES"></span></label>
</li>
<li>
<input type="checkbox" id="HORTICOLE" data-value="HORTICOLE"><i></i><label for="HORTICOLE" class="checkbox">Horticulture<span id="spanTypeExploitationHORTICOLE"></span></label>
</li>
<li>
<input type="checkbox" id="ERABLIERE" data-value="ERABLIERE"><i></i><label for="ERABLIERE" class="checkbox">Maple forest<span id="spanTypeExploitationERABLIERE"></span></label>
</li>
<li>
<input type="checkbox" id="PEPINIERE" data-value="PEPINIERE"><i></i><label for="PEPINIERE" class="checkbox">Nursery (tree)<span id="spanTypeExploitationPEPINIERE"></span></label>
</li>
<li>
<input type="checkbox" id="VERGER" data-value="VERGER"><i></i><label for="VERGER" class="checkbox">Orchard<span id="spanTypeExploitationVERGER"></span></label>
</li>
<li>
<input type="checkbox" id="EQUESTRE" data-value="EQUESTRE"><i></i><label for="EQUESTRE" class="checkbox">Riding centre<span id="spanTypeExploitationEQUESTRE"></span></label>
</li>
<li>
<input type="checkbox" id="MARAICHERE" data-value="MARAICHERE"><i></i><label for="MARAICHERE" class="checkbox">Vegetable farm<span id="spanTypeExploitationMARAICHERE"></span></label>
</li>
<li>
<input type="checkbox" id="VIGNOBLE" data-value="VIGNOBLE"><i></i><label for="VIGNOBLE" class="checkbox">Winery<span id="spanTypeExploitationVIGNOBLE"></span></label>
</li>
<li>
<input type="checkbox" id="AU" data-value="AU"><i></i><label for="AU" class="checkbox">Other<span id="spanTypeExploitationAU"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="Zonage" style="display: none;">
<div class="control-group">
<ul id="zonage" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="RESI" data-value="RESI"><i></i><label for="RESI" class="checkbox">Residential zoning<span id="spanZonageRESI"></span></label>
</li>
<li>
<input type="checkbox" id="COMM" data-value="COMM"><i></i><label for="COMM" class="checkbox">Commercial zoning<span id="spanZonageCOMM"></span></label>
</li>
<li>
<input type="checkbox" id="INDS" data-value="INDS"><i></i><label for="INDS" class="checkbox">Industrial zoning<span id="spanZonageINDS"></span></label>
</li>
<li>
<input type="checkbox" id="AGR" data-value="AGR"><i></i><label for="AGR" class="checkbox">Agricultural zoning<span id="spanZonageAGR"></span></label>
</li>
<li>
<input type="checkbox" id="FORE" data-value="FORE"><i></i><label for="FORE" class="checkbox">Forest zoning<span id="spanZonageFORE"></span></label>
</li>
<li>
<input type="checkbox" id="VILG" data-value="VILG"><i></i><label for="VILG" class="checkbox">Resort zoning<span id="spanZonageVILG"></span></label>
</li>
<li>
<input type="checkbox" id="RECR" data-value="RECR"><i></i><label for="RECR" class="checkbox">Recreational and tourism zoning<span id="spanZonageRECR"></span></label>
</li>
<li>
<input type="checkbox" id="AUT" data-value="AUT"><i></i><label for="AUT" class="checkbox">Other zoning<span id="spanZonageAUT"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="SecteurActivite" style="display: none;">
<div class="control-group">
<ul id="secteur-activite" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="ALIM" data-value="ALIM"><i></i><label for="ALIM" class="checkbox">Food services<span id="spanSecteurActiviteALIM"></span></label>
</li>
<li>
<input type="checkbox" id="REST" data-value="REST"><i></i><label for="REST" class="checkbox">Restaurant industry<span id="spanSecteurActiviteREST"></span></label>
</li>
<li>
<input type="checkbox" id="HEBERGEMENT" data-value="HEBERGEMENT"><i></i><label for="HEBERGEMENT" class="checkbox">Accomodation<span id="spanSecteurActiviteHEBERGEMENT"></span></label>
</li>
<li>
<input type="checkbox" id="VENDET" data-value="VENDET"><i></i><label for="VENDET" class="checkbox">Retail Sales<span id="spanSecteurActiviteVENDET"></span></label>
</li>
<li>
<input type="checkbox" id="SERVICE" data-value="SERVICE"><i></i><label for="SERVICE" class="checkbox">Service<span id="spanSecteurActiviteSERVICE"></span></label>
</li>
<li>
<input type="checkbox" id="FAB" data-value="FAB"><i></i><label for="FAB" class="checkbox">Manufacturing<span id="spanSecteurActiviteFAB"></span></label>
</li>
<li>
<input type="checkbox" id="AGRICOLE" data-value="AGRICOLE"><i></i><label for="AGRICOLE" class="checkbox">Agricultural<span id="spanSecteurActiviteAGRICOLE"></span></label>
</li>
<li>
<input type="checkbox" id="AU" data-value="AU"><i></i><label for="AU" class="checkbox">Other<span id="spanSecteurActiviteAU"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="GenreCommerce" style="display: none;">
<div class="field-focus">
<label for="genre-commerce">Type of business</label>
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input id="genre-commerce" class="focus dropdown ui-autocomplete-input" autocomplete="off">
<div id="genreCommerce-filters" class="filters-list">
<ul></ul>
</div>
<ul style="display:none"></ul>
</div>
</fieldset>
</div>
</fieldset>

One can click a link without seeing its content simply by using following line of code:
browser.find_element_by_xpath("//li[#class='next']/a").click()

About <div ui-view></div> where to put in the code exactly

I am developping an application using bootstarap,Html and Angular js 1 for front .. it's an application spring boot indeed . i have a navar : the menu which i put in an index.html in static .. the other html file i put in static/views (divs) . Now when i started by adding "FicheFournisseur" which worked in the database and fine but now when i was structering my project i click on the "fiche fournisseur" in nav bar it don't take me the the div of FicheFournisseur.html .. After searshing i felt that something releated to angular js is not working : i guess cuz whenever i change its position things change and am not understading am not familiar with angular js
i put in the index
i started with last li : Fournisseurs ui-sref="newFournisseur" do not take me to to page newFournisseur.html which came in other menus
<!DOCTYPE html>
<html>
<head>
<body ng-app="MyApp" >
<div id="container">
<!--BEGIN TOPBAR-->
<div id="header-topbar-option-demo" class="page-header-topbar">
<nav id="topbar" role="navigation" style="margin-bottom: 0;" data-step="3" class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<img src="../node_modules/bootstrap/dist/images/logo/logo.png">
</div>
<div class="topbar-main"><a id="menu-toggle" href="#" class="hidden-xs"><!--<i class="fa fa-bars"></i>--></a>
<a id="logo" href="index.html" class="navbar-brand"><span class="logo-text" style="color: #fff; margin-left: 50px;">
SYSTÈME INFORMATISÉ DE SUIVI ET ÉVALUATION DES PROGRAMMES ET DES PROJETS PUBLICS </span></a>
</div>
</nav>
<!--BEGIN MODAL CONFIG PORTLET-->
<div id="modal-config" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
<h4 class="modal-title">modal</h4>
</div>
<div class="modal-body">
<p>
contenu du modal
</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default"> valider</button>
<button type="button" class="btn btn-primary">annuler</button>
</div>
</div>
</div>
</div>
<!--END MODAL CONFIG PORTLET-->
</div>
<!--END TOPBAR-->
<div id="wrapper">
<!--BEGIN SIDEBAR MENU-->
<nav id="sidebar" class="nav navbar-default navbar-static-side" role="navigation" data-step="2"
data-position="right">
<!-- <ul class="nav__list">
<li>
</span> Accueil </label>
</li>
</ul> -->
<ul class="nav__list">
<li>
<input id="group-1" type="checkbox" hidden />
<label for="group-1"><span class="fa fa-angle-right"></span> Suivi des marchés </label>
<ul class="group-list">
<div class="clearfix"></div>
<li>
<input id="sub-group-6" type="checkbox" hidden />
<label for="sub-group-6"><span class="fa fa-angle-right"></span> Consignation des marchés </label>
<ul class="sub-group-list">
<li>
<input id="sub-group-2" type="checkbox" hidden />
<label for="sub-group-2"><span class="fa fa-angle-right"></span> Fiche marché</label>
<ul class="sub-group-list">
<li class="active"><a href="test1.html">Fiche marché</li>
<li><a class="" href="modification.html">Consignation avenant</a></li>
</ul>
</li>
<li class="active">yyy</li>
<!-- insérer plus -->
</ul>
</li>
<li>
<input id="sub-group-20" type="checkbox" hidden />
<label for="sub-group-20"><span class="fa fa-angle-right"></span> Consignation des appels à la concurrence </label>
<ul class="sub-group-list">
<!-- <li class="active">ici</li> -->
<li>
<input id="sub-group-3" type="checkbox" hidden />
<label for="sub-group-3"><span class="fa fa-angle-right"></span> Fiche appel à la concurrence </label>
<ul class="sub-group-list">
<li>
<input id="sub-group-4" type="checkbox" hidden />
<label for="sub-group-4"><span class="fa fa-angle-right"></span> Fiche lot</label>
<ul class="sub-group-list">
<li class="active">Fiche Activité</li>
<li><a class="" href="">xxx</a></li>
<li><a class="" href="">xxxx</a></li>
</ul>
</li>
<!--<li class="active"><a href="#">Fiche lot</li>
<li><a class="" href="">xxx</a></li>
<li><a class="" href="">xxxx</a></li> -->
</ul>
</li>
<!-- insérer plus -->
</ul>
</li>
<li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1"><span class="fa fa-angle-right"></span> Fournisseurs</label>
<ul class="sub-group-list">
<li class="active"><a ui-sref="newFournisseur">Fiche Fournisseur</a></li>
</ul>
</li>
<!--<li>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxx</li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1"><span class="fa fa-angle-right"></span> Financement</label>
<ul class="sub-group-list">
<li class="active">2nd level nav item</li>
<li>2nd level nav item</li>
<li>2nd level nav item</li>
<li>
<input id="sub-sub-group-1" type="checkbox" hidden />
<label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
<ul class="sub-sub-group-list">
<li>3rd level nav item</li>
<li>3rd level nav item</li>
<li>3rd level nav item</li>
</ul>
</li>
</ul>
</li>-->
</ul>
</li>
</ul>
</nav>
<!--END SIDEBAR MENU-->
<!--BEGIN PAGE WRAPPER-->
<div id="page-wrapper">
<!--BEGIN CONTENT-->
<div class="page-content">
<div id="tab-general">
<div class="row mbl">
<div ng-view></div>
</div>
</div>
</div>
<!--END CONTENT-->
</div>
<!--END PAGE WRAPPER-->
</div>
</div>
<!--END PAGE CONTAINER-->
<script src="../node_modules/bootstrap/dist/js/jquery-3.1.1.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../node_modules/bootstrap/dist/js/jquery-3.1.1.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<div ui-view></div>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

why arent tabs of bootstrap working

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#menu2">Video</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="uploaded-image-ct">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Upload image
</button>
</div>
</div>
<div id="songs" class="tab-pane fade">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>
<div id="video" class="tab-pane fade">
<div class="form-group">
<input placeholder="Paste YouTube link here" type="text">
</div>
</div>
</div>
the video section should show youtube which there on html but not on the page.
i checked whether jquery is loaded ahead of bootstrap.js.. But still it is not working. Turns out the tab button is not working like it should. although when u click on image button image section will be shown. Is it the problem only with input tag?

Working Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#video">Video</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="uploaded-image-ct">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Upload image
</button>
</div>
</div>
<div id="songs" class="tab-pane fade">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>
<div id="video" class="tab-pane fade">
<div class="form-group">
<input placeholder="Paste YouTube link here" type="text">
</div>
</div>
</div>
jQuery needs the correct href in the anchor tag which you have in the tab that points to the correct tab-pane.
You were using:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#menu2">Video</a>
</li>
</ul>
You need to have the href of the Video point to #video like so:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#video">Video</a>
</li>
</ul>

Your video pill has the following:
<li><a data-toggle="pill" href="#menu2">Video</a>
but the id of the tab you are trying to link it to is:
<div id="video" class="tab-pane fade">
you need to change the pill to the same id
<li><a data-toggle="pill" href="#video">Video</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#video">Video</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="uploaded-image-ct">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Upload image
</button>
</div>
</div>
<div id="songs" class="tab-pane fade">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>
<div id="video" class="tab-pane fade">
<div class="form-group">
<input placeholder="Paste YouTube link here" type="text">
</div>
</div>
</div>