Develop Reference

Remove class from other divs on click and also find class and toggle class

nav-link li -> is the parent
dropdown - is child I need to toggle child by clicking parent.
When i click other element(nav-link li) it works fine by removing class name open. when i try toggle same element its not works(nav-link li) and its not toggle.
jQuery(".nav-link li").click(function() {
$('.drop-down').not(this).removeClass('open');
$('a').not(this).removeClass('mins');
jQuery(this).find(".drop-down").toggleClass("open");
jQuery(this).find("a").toggleClass("mins");
});
.nav-link .drop-down.open {
max-height: 1000px;
}
.nav-link .drop-down {
max-height: 0;
}
.nav-link .mob-menu-con .mins:after {
content: "-";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-link">
<li class="mob-menu-con">
<a class="" href="#">LANDWIRTSCHAFT</a>
<img class="arrow-down" src="./assets/img/icons/assest-05.png">
<div class="drop-down">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="menu-list">
<p class="menu-title">Traktorzubehör</p>
<ul>
<li>Bolzen</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="menu-list">
<p class="menu-title wd-space">Folien & Silieren</p>
<ul>
<li><a class="wd-space" href="#">Folien & Planen</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="mob-menu-con">
TIERZUCHT
<img class="arrow-down" src="./assets/img/icons/assest-05.png">
<div class="drop-down">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="menu-list">
<p class="menu-title">Traktorzubehör</p>
<ul>
<li>Bolzen</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>

Try adding
overflow: hidden;
to
.nav-link .drop-down {
max-height: 0;
overflow: hidden;
}

How to toggle vertical tabs with vertical text and content using jquery

This code is displaying vertical tabs with vertical text and content. Toggle is not working properly, when I click on second tab, first content is also displaying. Can anyone help me to get the content of individual tabs? Here I have mentioned html, css and javascript code. Is it possible in Jquery? Can anyone mention the details?
<main id="main">
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home
</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<div class="tab-content">
<div id="left" >
<div>
<ul id="tree1" >
<li id="li2">News
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li id="li2">Sites
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined'){
if (typeof o.openedClass != 'undefined'){
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined'){
closedClass = o.closedClass;
}
};
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
tree.find('.branch .indicator').each(function(){
$(this).on('click', function () {
$(this).closest('li').click();
});
});
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
$('#tree1').treed();
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-
bootstrap/2.3.2/js/bootstrap.min.js"></script>

You forgot both import of jQuery (JSfiddle console raised that error) and Boostrap classes (tab-pane) and ids (the content of the href of the a tag) on tabs panels.
Here the right code:
jQuery Script from CDN:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Here the right panel code:
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<hr/>
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home-v">Home Tab.</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
I simplified the code inside the Home panel in order not to post a big piece of code, which was not relevant.
Hope this helps!
Working codepen link with full code.

Javascript Scroll not working as expected

I am trying to implement a smooth scroll to another section from my navigation.
The following is the javascript function im using
:
<script type="text/javascript">
function goToByScroll(id){
// Reove "link" from the ID
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>
My HTML is as following :
<div class="module-group right">
<div class="module left" id="nav">
<ul class="menu">
<li class="">
<a href="#">
Home
</a>
</li>
<li class="">
<a id="about" href="#">
About Us
</a>
</li>
</ul>
</div>
</div>
My section is as below :
<section id="about">
<div class="container" id="">
<div class="row" id="">
<div class="col-sm-12">
<h4 class="uppercase mb80">About Us</h4>
<div class="tabbed-content button-tabs vertical">
<ul class="tabs">
<li class="active">
<div class="tab-title">
<span>Introduction</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Let's Talk about</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>History</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our footprints on the sands of time..</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Mission</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Mission</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Vision</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Vision</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
</ul>
</div>
<!--end of button tabs-->
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
I am facing problems calling the jquery function. I looked up on other questions asked and tried implementing an answer previously given, however it doesnt seem to be working for me.

Change your nav link to About Us.
Then change the function call to goToByScroll($(this).attr("href"));

You can not have two elements with the same id. Use the href like it was intended.
About Us
and when you read the hsah of the clicked anchor
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
basic example:
function goToByScroll(id) {
$('html,body').animate({
scrollTop: $(id).offset().top
},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li> About Us </li>
</ul>
</div>
<div style="height:300px;">x</div>
<div style="height:300px;">x</div>
<div id="about" style="height:300px; border: 1px solid black;">ABOUT</div>
<div style="height:300px;">x</div>

Use href attribute to store the id you need to scroll to. Also don't forget to wrap javascript in $(document).ready() to make sure event handlers are attached after the page is ready.
Here's javascript:
$(document).ready(function() {
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top
}, 'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll($(this).attr("href"));
});
});
And in HTML:
<li class="">
<a href="#about">
About Us
</a>
</li>

add class on scroll in bootstrap tabing

i need a small help for add a class on scroll in bootstrap tabbing carousal.
so here is my page url
when i click on any point from tabing like 1,2,3.. active class is adding on tabing on same that is perfect i use this is script
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
it is working perfect as class is adding on li.active but i also want .active class on current tab when i scroll in tab container. i have added scroll code and working perfect but need class to add in .tab li when i scroll
here is HTML code as well
<div class="tab">
<div class="container-tab">
<ul class="list-inline nav">
<li data-target="#myCarousel" data-slide-to="0" class="active"> <a href="#">
<div class="round-tab-num"> 1 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="1"> <a href="#">
<div class="round-tab-num"> 2 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="2"> <a href="#">
<div class="round-tab-num"> 3 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="3"> <a href="#">
<div class="round-tab-num"> 4 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="4"> <a href="#">
<div class="round-tab-num"> 5 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
</ul>
<!--The main div for carousel-->
<div id="myCarousel" class="carousel horizantal slide" data-interval="false">
<!-- Sliding images statring here -->
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h3>test1</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test2</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test3</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test4</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test5</h3>
</div>
</div>
</div>
<!-- Next / Previous controls here -->
<div> </div>
</div>
</div>
</div>
this code is also added
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.container-tab .nav a', function() {
clickEvent = true;
$('.container-tab .nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.container-tab .nav').children().length -1;
var current = $('.container-tab .nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.container-tab .nav li').first().addClass('active');
}
}
clickEvent = false;
});
});

change your code as below simply remove class from currently active li and add active class to next li as below
$('#myCarousel').bind('mousewheel', function(e) {
$(this).carousel('next');
var $currentlyactive =$('li.active');
$currentlyactive.removeClass('active');
$currentlyactive.next().addClass('active');
});
Updated
$(document).ready(function() {
$('.carousel').carousel('pause');
});
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
this is the code in your html page remove this all carousel related code has been done in custom.js..

Bootstrap slideshow not working

I am trying to make the bootstrap tabnavigation as a slideshow like switching the tabs automatically and I want to reset the timer when user click the navigation buttons, but here it is not working please help me to fix the problem in this script. I tried it here jsfiddle
tabSlideshowSetup('#slideshowOne');
tabSlideshowSetup('#slideshowTwo');
function tabSlideshowSetup(parent) {
var toime = 0;
var tabs = $(parent).children('.dot-nav > li');
var tabsPagenationDots = $(parent).children('.dot-nav > li > a');
function imgFunc(){
var active = tabs.filter('.active'),
next = active.next('li'),
toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
clearInterval(toime);
toime=setInterval(imgFunc, 18000);
}
toime=setInterval(imgFunc, 18000);
tabsPagenationDots.click(function(){
clearInterval(toime);
toime=setInterval(imgFunc, 18000);
});
}
Html code is here:,
<div id="slideshowOne" class="row-fluid">
<div class="tab-content row-fluid" id="testimonial-section">
<div class="row-fluid tab-pane active" id="ttta">
<p class="testimonial-detail">Anand Lunia, <small> India Quotient Founder, Angel Investor </small></p>
</div>
<div class="row-fluid tab-pane" id="tttb">
<p class="testimonial-detail">Raghu Dixit, <small>Renowned Musician </small></p>
</div>
<div class="row-fluid tab-pane" id="tttc">
<p class="testimonial-detail">Surekha Pillai, <small>Communications Consultant </small></p>
</div>
</div>
<ul class="nav nav-tabs dot-nav" id="testimonial_tab">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<div id="slideshowTwo" class="row-fluid">
<div class="tab-content row-fluid" id="testimonial-section">
<div class="row-fluid tab-pane active" id="ttta">
<p class="testimonial-detail">Anand Lunia, <small> India Quotient Founder, Angel Investor </small></p>
</div>
<div class="row-fluid tab-pane" id="tttb">
<p class="testimonial-detail">Raghu Dixit, <small>Renowned Musician </small></p>
</div>
<div class="row-fluid tab-pane" id="tttc">
<p class="testimonial-detail">Surekha Pillai, <small>Communications Consultant </small></p>
</div>
</div>
<ul class="nav nav-tabs dot-nav" id="testimonial_tab">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>

jsFiddle Demo
tabsPagenationDots.click(function () {
clearInterval(toime);
toime = setInterval(imgFunc, 3000);
tabsBox.hide();
var index = tabsPagenationDots.index(this);
tabsBox.eq(index).show();
});