Develop Reference

Expanding an accordion and scrolling to a section after expansion

I have a comments section and a review form at the bottom of the comments section. I have the entire comments section wrapped in a Bootstrap Accordion with the class of Collapse:
CODEPEN:
Check out the demo. Note clicking the "leave a review" link expands the review_form, but does not scroll to.
Working codepen
I've tried onClick="window.scrollTo(#review_form)", but that does not work.
Basic HTML:
<div class="review-collapse">
<button class="woocommerce button review-button" data-toggle="collapse" data-target="#commentList" aria-expanded="false" aria-controls="commentList">SHOW ALL REVIEWS'</button>
</div>
<div class="collapse" id="commentList">
<div class="leave-review">
<a data-toggle="collapse" data-target="#review_form_wrapper" aria-expanded="false" aria-controls="review_form_wrapper" onClick="window.scrollTo(#review_form)">Leave a review?></a>
</div>
<ol class="commentList">
//Comments here
</ol>
<div id="review_form_wrapper" class="collapse">
<div id="review_form">
//review form to be expanded
</div>
</div
I want to focus on the a in .leave-review: I would like to expand the #review_form_wrapper on click, and then scroll to the section immediately after. I can get the form to expand, but I cannot get the form to scroll into view.
Any suggestions? I would like to use Vanilla JS if possible, but jQuery is fine as well.

I was able to fix this by not using window.scrollTo(#reviewForm) but the scrollIntoView() method. I had to check if the #review_form_wrapper had the class of show before scrolling, which I used a setTimeout() for:
function productReviewJS() {
const link = document.querySelector("#scrollToReview");
link.addEventListener("click", function () {
window.setTimeout(function () {
if (reviewForm.classList.contains("show")) {
form.scrollIntoView({ behavior: "smooth" });
}
}, 400);
});
}
productReviewJS();

How to get the value change using jquery

I have this code from a template I brought. I tried some of the answers on StackOverflow but I cannot get data from the option when it is changed. When user selects an option without out reload I have to insert new data to a div. but I can't figure out how to get data from this drop down.
<div class="drop-list-one">
<div class="inner clearfix">
<div class="dropdown-outer"><a class="btn-box dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" href="#">Default Sorting</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li>Subjects</li>
<li>Timelines</li>
<li>Popular</li>
<li>Incomplete</li>
</ul>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('.dropdown-menu li').on('click', function () {
console.log($(this).text());
});
}) ;
</script>

how to replace div content for button click on same page in bootstrap

I like to show div content by 4 different button click on same page by replacing or hiding previous button click div content...
code-
<div class="col-sm-3">
<div class="btn-group-vertical" style="padding-top:12px;">
<button type="button" class="btn btn-warning" id="btn1">Btn1</button>
<button type="button" class="btn btn-warning" id="btn2">Btn2</button>
<button type="button" class="btn btn-warning" id="btn3">Btn3</button>
<button type="button" class="btn btn-warning" id="btn4">Btn4</button>
</div>
</div>
<div id="content" class="col-sm-9">
<div id="pilot" style="display:block;">
<p>Name1</p>
<h4>my name is A..........</h4>
</div>
<div id="design" style="display:block;">
<p>Name2</p>
<h4>my name is A..........</h4>
</div>
<div id="instrument" style="display:block;">
<p>Name3</p>
<h4>my name is A..........</h4>
</div>
<div id="innovations" style="display:block;">
<p>Name4</p>
<h4>my name is A..........</h4>
</div>
</div>
I have tried two jquery scripts but not worked as per my requirement...
script1-
$(document).ready(function(){
$("#btn1").click(function(){
$("#design").css("display","none");
$("#instrument").css("display","none");
$("#innovations").css("display","none");
$("#pilot").css("display","block");
}
$("#btn2").click(function(){
$("#pilot").css("display","none");
$("#instrument").css("display","none");
$("#innovations").css("display","none");
$("#design").css("display","block");
}
$("#btn3").click(function(){
$("#design").css("display","none");
$("#pilot").css("display","none");
$("#innovations").css("display","none");
$("#instrument").css("display","block");
}
$("#btn4").click(function(){
$("#design").css("display","none");
$("#instrument").css("display","none");
$("#pilot").css("display","none");
$("#innovations").css("display","block");
}
}
script2-
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#design").replaceWith( $("#pilot").show() );
$("#instrument").replaceWith( $("#pilot").show() );
$("#innovations").replaceWith( $("#pilot").show() );
}
$("#btn2").click(function(){
$("#pilot").replaceWith( $("#design").show() );
$("#instrument").replaceWith( $("#design").show() );
$("#innovations").replaceWith( $("#design").show() );
}
$("#btn3").click(function(){
$("#design").replaceWith( $("#instrument").show() );
$("#pilot").replaceWith( $("#instrument").show() );
$("#innovations").replaceWith( $("#instrument").show() );
}
$("#btn4").click(function(){
$("#design").replaceWith( $("#innovations").show() );
$("#instrument").replaceWith( $("#innovations").show() );
$("#pilot").replaceWith( $("#innovations").show() );
}
}
</script>
so please give me some suitable answer to workout ....if it is possible with bootstrap scrollspy then also suggest....tnx

Your first code example doesn't work as you haven't closed the braces and brackets correctly. Here's a working version: jsFiddle. Your second code example is using an entirely wrong approach.
That being said, by using DRY principles you can massively reduce the amount of JS code required to achieve this.
Firstly, add a data-* attribute to your .btn elements which can be used to identify the div to be shown when the button is clicked:
<button type="button" class="btn btn-warning" id="btn1" data-target="pilot">Btn1</button>
<button type="button" class="btn btn-warning" id="btn2" data-target="design">Btn2</button>
<button type="button" class="btn btn-warning" id="btn3" data-target="instrument">Btn3</button>
<button type="button" class="btn btn-warning" id="btn4" data-target="innovations">Btn4</button>
Then in your JS code you can write a single click handler which works for all buttons:
$('.btn').click(function() {
$('#content div').hide();
var target = '#' + $(this).data('target');
$(target).show();
})
Working example

Associate the target div's with the buttons using data-attributes. Now, on every click you can get the target value from that data-attribute and then use that to select only that div, that you need to show. You should hide all div's before showing the one that needs to be shown.
<a id="btn1" href="#" data-target="design">button 1</a>
<a id="btn2" href="#" data-target="pilot">button 2</a>
<a id="btn3" href="#" data-target="instrument">button 3</a>
<div id="design-div" class="targetdivs">Design</div>
<div id="pilot-div" class="targetdivs">Pilot</div>
<div id="instrument-div" class="targetdivs">Instrument</div>
<script>
$("#btn1, #btn2, #btn3").on("click", function(e){
e.preventDefault();
var target = $(this).data("target");
$(".targetdivs").css("display", "none");
$("#"+target+"-div").css("display", "block");
});//click
</script>

try this:
$('#btn1').click(function(){
$("#content div").hide()
$("#pilot").show()
});
$('#btn2').click(function(){
$("#content div").hide()
$("#design").show()
});
$('#btn3').click(function(){
$("#content div").hide()
$("#instrument").show()
});
$('#btn4').click(function(){
$("#content div").hide()
$("#innovations").show()
});
here's a jsfiddle

Bootstrap two responsive menus - collapse one menu when the other menu-button is clicked

There are two search-containers:
<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu"></div>
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu"></div>
The buttons to collapse this containers:
<button class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarSearch" </button>
<button class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarMenu" </button>
Is it possible (and how) as to hide one menu (if is open) when the other menu is clicked - and so open the second menu?
Currently when the navbarMenu is open and i'm gonna open the other menu all two menus are open... You know what I mean?
Thank you :)

I think that toggleClass() triggered by a click() event is what you are after.
https://api.jquery.com/click/
http://api.jquery.com/toggleclass/
$( document ).ready(function() {
$( ".navbarSearch_button" ).click(function() {
//alert( "Handler for button_1 called." );
$( "#navbarSearch" ).toggleClass("navbar-collapse collapse")
});
$( ".navbarMenu_button" ).click(function() {
//alert( "Handler for navbarMenu_button called." );
$( "#navbarMenu" ).toggleClass("navbar-collapse collapse")
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu">lala</div>
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu">mama</div>
<button class="b1 navbarSearch_button">navbarSearch</button>
<button class="b1 navbarMenu_button" >navbarMenu</button>

You need to differentiate the data-target attribute with a unique class or id for your dropdown menus like so:
For your first menu
<a class="btn btn-navbar" data-toggle="collapse" data-target="#first">
For your second menu:
<a class="btn btn-navbar" data-toggle="collapse" data-target="#second">
Then you can add that unique id to your nav collapse container:
First
<div id="first" class="nav-collapse"> ... </div>
Second
<div id="second" class="nav-collapse"> ... </div>

You can use the method .collapse() already available in Bootstrap to hide the menu not involved.
Update the html code to this:
<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu"></div>
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu"></div>
<button id="navbarSearchButton" class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarSearch"></button>
<button id="navbarMenuButton" class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarMenu"></button>
Then add the js code in separate file:
$(function()
{
$('#navbarSearchButton').on ('click', function() { $('#navbarMenu').collapse('hide'); });
$('#navbarMenuButton').on ('click', function() { $('#navbarSearch').collapse('hide'); });
});

How to close the Bootstrap navbar dropdown when the user clicks outside the menu?

I have a Bootstrap navbar that collapses when shrunk and drops down as a menu when the toggle button is tapped/clicked. However, once open, it stays open until one clicks the toggle button again. Is there any way to close it automatically when the user A) clicks outside the menu area, and B) scrolls the page up or down on the mobile device? Here's what the navbar looks like when collapsed:
And this is the dropdown:
I need the dropdown to collapse when the yellow area or any menu item is clicked (except the search box). So far, my JS looks like this:
// prevent search box from vanishing upon click in responsive mode
$('input.form-control').click(function(e) { e.stopPropagation(); });
// re-collapse nav dropdown menu after selection (in responsive mode)
$('.navbar-fixed-top').click('li', function() {
$('.navbar-collapse').collapse('hide');
});
// close drop-down nav when user clicks outside
$(document).ready(function () {
function CloseNav() {
$(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
$(".navbar-toggle").stop().removeClass('collapsed');
}
$('html').click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
CloseNav();
}
});
});
And here's the relevant HTML snippet:
<!-- Nav bar -->
<div class="navbar navbar-default navbar-fixed-top top-nav" role="navigation">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#"><img src="bootstrap/img/gray_logo.png" class="site-logo"><span class="site-name-first">Always</span><span class="site-name-second">Spanish</span></a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<!-- Search box start -->
<form class="navbar-form navbar-right search-box" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- Search box start -->
<ul class="nav navbar-nav pull-right">
<li ng-class="{ active: isActive('/about')}">About</li>
<li ng-class="{ active: isActive('/blog')}">Blog</li>
<li>Premium</li>
<li>Books</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Of the 3 JS scripts, the first two seem to work fine. It's just the last one that doesn't. Also, I don't yet know how to field the scroll event at all. I am sure I'm doing something very silly here. Please help!

listen for all clicks on window and check if there is no parents here with class of navbar. you can use closest for that
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
Polyfill: https://github.com/jonathantneal/closest