Develop Reference

Open only one accordian collapse, bootstrap

Using Bootstrap...
How to make this so that only one accordion collapsable DIV is open at a time. When one is clicked open, the other should close (if it is open?)
Looking for the most simple and streamlined solution...
<div class="row" id="nav-top">
<div class="col-md-6">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >SIGN-IN</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-6">
<div>
REGISTER
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
</div>

You have to use show.bs.collapse event which is fired immediately when the collapse element starts showing. Then you can hide other collapsible menus, Like this:
// when showing signin accordion
$('#signin').on('show.bs.collapse', function () {
// hide register accordion
$('#register').collapse('hide');
});
$('#register').on('show.bs.collapse', function () {
$('#signin').collapse('hide');
});
But If you have multiple accordion you can't call this event in each one of them, You have to use a class to select them all and call show.bs.collapse only one time, Here is a working example:
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" id="nav-top">
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >ABOUT</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#register" >REGISTER</a>
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#about" >SIGN-IN</a>
</div>
<div id="about" class="collapse">
FORM HERE
</div>
</div>
</div>
</div>

How to disable jQuery blur event on certain selector

I have the following jQuery and HTML which hide the search result when the focus on the input has been lost.
This code hides my div with id #searchResult when the elements on #searchResult are clicked. I want to disable blur when elements on #searchResult div are clicked. Basically, I want to hide <div id="searchResult"> when the focus is lost and show when it's on focus. How can I achieve that?
$(document).on("blur", "#txtSearchTerm", function () {
$('#searchResult').hide();
});
$(document).on("focus", "#txtSearchTerm", function () {
$('#searchResult').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
</ul>
</div>
<div id="searchResult"> will be hidden on every click of elements inside it.

You can simply turn off your blur event with the following code.
$(document).off("blur", "#txtSearchTerm");

You dont need blur event to achieve that:
$(document).click(function(e) {
if ($(e.target).is("div") && $(e.target).has("ul > li")){
$('#searchResult').show()
}
else $('#searchResult').hide()
if ($(e.target).is(':focus')){
$('#searchResult').show()
}
})
#searchResult{
margin-top: 50px;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
Click out the input to hide div
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
</ul>
</div>

You can't do that, because the blur is fired before the click on the child.
So you would need to add an event handler on the document which closes the results. You cancel that event when someone clicks the results. Something like this:
$('#txtSearchTerm').click(function(e) {
$('#searchResult').show();
e.stopPropagation();
});
$(document).click(function(e) {
$('#searchResult').hide();
});
$('#searchResult').click(function(e) {
e.stopPropagation();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
</ul>
</div>

My advise it to check relatedTarget and kill blur only if user clicks on certain elements.
$(document).on("blur", "#txtSearchTerm", function (e) {
if ($(e.relatedTarget).hasClass("no-blur")){
}else{
$('#searchResult').hide();
}
});
$(document).on("focus", "#txtSearchTerm", function () {
$('#searchResult').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
</ul>
</div>

How to make a tab system with jquery in this project?

I'm trying to create a tab system but I can not hide and show the tabs.
I can not find a way to make it work, this is my code.
$(function() {
$(".aba:not(:first)").hide();
$("a").click(function() {
var div = $(this).attr("href");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="left-side">
<div class="services">
<ul class="clearfix">
<li><a class="blink" href="#a_nota">NOTA</a></li>
<li><a class="blink" href="#a_frequencia">FREQUÊNCIA</a></li>
<li><a class="blink" href="#a_grade">GRADE CURRICULAR</a></li>
<li><a class="blink" href="#a_financeiro">FINANCEIRO</a></li>
</ul>
<div class="contato">
<div class="tell">
<img src="icon/phoneicon.png" alt="teste">
<p>Contato: 08000 023 1231</p>
</div>
</div>
</div>
</div>
<div class="right-side">
<div id="a_nota" class="aba">NOTA</div>
<div id="a_frequencia" class="aba">FREQUÊNCIA</div>
<div id="a_grade" class="aba">GRADE</div>
<div id="a_financeiro" class="aba">FINANCEIRO</div>
</div>
</div>

You can do like this, where you set all the tabs to display: none; and then on click add the class active which changes it to display:block !important;
$('a.blink').on('click', function(){
var clicked = $(this).attr('href').replace("#", "");
$('div.aba').each(function(){
if($(this).attr('id') === clicked){
$(this).addClass('active');
}else{
$(this).removeClass('active');
}
});
});
.aba{
display:none;
}
.aba.active{
display:block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="left-side">
<div class="services">
<ul class="clearfix">
<li><a class="blink" href="#a_nota">NOTA</a></li>
<li><a class="blink" href="#a_frequencia">FREQUÊNCIA</a></li>
<li><a class="blink" href="#a_grade">GRADE CURRICULAR</a></li>
<li><a class="blink" href="#a_financeiro">FINANCEIRO</a></li>
</ul>
<div class="contato">
<div class="tell">
<img src="icon/phoneicon.png" alt="teste">
<p>Contato: 08000 023 1231</p>
</div>
</div>
</div>
</div>
<div class="right-side">
<div id="a_nota" class="aba active">NOTA</div>
<div id="a_frequencia" class="aba">FREQUÊNCIA</div>
<div id="a_grade" class="aba">GRADE</div>
<div id="a_financeiro" class="aba">FINANCEIRO</div>
</div>
</div>

You can make it work this way:
jQuery:
$(".aba").not(":first-child").hide();
$(".blink").on("click", function(e) {
e.preventDefault();
var value = $(this).attr("href");
$(".aba").hide();
$(value).fadeIn(500);
});

jQuery. Bootstrap wizard not going to next step

I am using a bootstrap wizard but when you click on the next step, it's not going forward .
I am trying to make it go all the way and enable the previous once it reaches the end.
For some reason its not working correctly
my FIDDLE
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide();
navListItems.click(function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active');
$item.addClass('active');
allWells.hide();
$target.show();
}
});
$('ul.setup-panel li.active a').trigger('click');
$('#activate-step-2').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-2"]').trigger('click');
$(this).remove();
})
$('#activate-step-3').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-3"]').trigger('click');
$(this).remove();
})
});

First: you missed the next buttons in your html like:
<button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>
If you need to cycle both on the container and setup you can implement this behavior in one of the two container and make the other to follow the first one.
I rearranged your code so that you can cycle in a cyclic way (updated fiddle here).
If, instead, you want to cycle only on the setup you may consider a new event: clickwiz instead of click.
The snippet:
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide().eq(0).show();
navListItems.on('click', function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active').addClass('disabled');
allWells.hide();
if ($item.next('li').length == 0) {
//
// for cyclic: go back to first ele
//
navListItems.eq(0).closest('li').removeClass('disabled').addClass('active');
allWells.eq(0).show();
} else {
$item.next('li').removeClass('disabled').addClass('active');
$target.next('div').show();
}
}
});
$('[id^="activate-step-"]').on('click', function(e) {
var href = '#' + $(this).closest('.setup-content').attr('id');
$('ul.setup-panel li a[href="' + href + '"]').trigger('click');
})
});
body{
margin-top:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row form-group">
<div class="col-xs-12">
<ul class="nav nav-pills nav-justified thumbnail setup-panel">
<li class="active"><a href="#step-1">
<h4 class="list-group-item-heading">Step 1</h4>
<p class="list-group-item-text">First step description</p>
</a></li>
<li class="disabled"><a href="#step-2">
<h4 class="list-group-item-heading">Step 2</h4>
<p class="list-group-item-text">Second step description</p>
</a></li>
<li class="disabled"><a href="#step-3">
<h4 class="list-group-item-heading">Step 3</h4>
<p class="list-group-item-text">Third step description</p>
</a></li>
<li class="disabled"><a href="#step-4">
<h4 class="list-group-item-heading">Step 4</h4>
<p class="list-group-item-text">Fourth step description</p>
</a></li>
</ul>
</div>
</div>
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1> STEP 1</h1>
<button id="activate-step-2" class="btn btn-primary btn-lg">Activate Step 2</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1 class="text-center"> STEP 2</h1>
<button id="activate-step-3" class="btn btn-primary btn-lg">Activate Step 3</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1 class="text-center"> STEP 3</h1>
<button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-4">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1 class="text-center"> STEP 4</h1>
<button id="activate-step-1" class="btn btn-primary btn-lg">Activate Step 1</button>
</div>
</div>
</div>
</div>

Hide/show jquery only works on 1 div

I am creating a page that has 4 different sections. In each section there are 2 buttons that hide/show 2 different divs. Right now it only works on the top div and when you click the buttons in the other 3 divs, they open the top div. The content is being pulled from wordpress posts. Here is the javascript I am using.
$(document).ready(function() {
$('.expander').on('click', function() {
if ($('#TableData').is(":visible")) {
$('#TableData').hide();
} else {
$('#TableData').show();
}
$('#TableData2').hide();
return false;
});
$('.expander2').on('click', function() {
if ($('#TableData2').is(":visible")) {
$('#TableData2').hide();
} else {
$('#TableData2').show();
}
$('#TableData').hide();
return false;
});
});
Here is the html:
<div class="popup-open">
<div class="icons-large"></div>
<div class="icons-large"></div>
<div class="title">Title</div>
WHAT'S IN THE BAG</br>
PLAYER HISTORY
</div>
</div>
<div id="TableData">
<div class="slidingDiv">
<div id="tabs-1">
<div class="witb-tab">
<div class="row">
<a target="_blank" href="#">
<div class="image">
<img src="#" alt="">
<a target="_blank" class="product-name" href="" title=">">
</a>
</div>
</a>
</div>
</div>
CLOSE
</div>
</div>
</div>
<div id="TableData2">
<div class="slidingDiv2">
<div class="column left">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="player-biography">
</div>
</div>
<div class="column right">
<div id="tabs-2">
<div class="content-wrap"></div>
</div>
CLOSE
</div>
</div>
</div>