How can i amend this code please so that the buttons change on the active. It's getting soemwhere with toggleClass but the button that was formerly active remains active.
<script type="text/javascript">
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').hide();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).toggleClass( "greenactive"
).attr('target')).show();
});
});
</script>
my button code
<ul class="choose">
<li><a class="showSingle" target="1">Email Order</a></li>
<li><a class="showSingle" target="2">Order and Pay Now</a></li>
</ul>
the divs
<div id="div1" class="targetDiv" style="display:none">
content
</div>
<div id="div2" class="targetDiv" style="display:none">
content
</div>
style
a.greenactive {background:green}
use removeClass() before addclass()
$('.showSingle').click(function () {
$('.targetDiv').hide();
$('.showSingle').removeClass('greenactive');
$(this).addClass("greenactive")
$('#div' + $(this).attr('target')).show();
});
a.greenactive {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="choose">
<li>
<a class="showSingle" target="1">Email Order</a>
</li>
<li>
<a class="showSingle" target="2">Order and Pay Now</a>
</li>
</ul>
<div id="div1" class="targetDiv" style="display:none">content1</div>
<div id="div2" class="targetDiv" style="display:none">content2</div>
You just need to call removeClass() on all the .showSingle elements before toggling the class on the one which raised the event:
$('.showSingle').removeClass('greenactive');
Working example
Related
I have been trying to create multiple divs which should be hidden at page load. The div should be shown if the corresponding button is clicked and should hide if the same button is clicked again. Also if one of the divs is being shown and another button is clicked, then the div corresponding to that button should show up. If the same button is clicked again then the div should hide.
I have followed a thread on SO for the same and am able to show divs corresponding to button click but the toggle functionality is not working.
Please find the fiddle :
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
https://jsfiddle.net/8pyovyqn/3/
Any help is appreciated.
Use not to hide the all except clicked one and set style="display:none;" for all the div to hide them by default.
$(function() {
$('.showSingle').click(function() {
$('.targetDiv').not('#div' + $(this).attr('target')).hide();
$('#div' + $(this).attr('target')).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>
You can use toggle to achieve what you need:
jQuery(function(){
jQuery('.showSingle').click(function(){
var target = $(this).attr('target');
$('#div'+target).toggle('.hide');
});
});
.targetDiv{
display: none;
}
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
Try the below jQuery code, Replace this code with your jQuery code and check functionality it will work. The toggle function is used to toggle for hide and show the element.
jQuery(function(){
jQuery('.targetDiv').hide();
jQuery('.showSingle').click(function(){
jQuery('#div'+$(this).attr('target')).toggle();
});
});
First of all set display attribute of all divs to none:
<div class="buttons">
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>
Then toggle div like below:
jQuery(function(){
jQuery('.showSingle').click(function(){
$('.targetDiv').not('#div' + $(this).attr('target')).hide();
$('#div'+$(this).attr('target')).toggle();
});
});
You can do like below fiddle to achieve that:
https://jsfiddle.net/8pyovyqn/28/
So many answers already, but I think none of them work the way #Pravin wants it to work.
So here is my suggestion:
jQuery(function(){
jQuery('.showSingle').click(function(){
var objdiv = $('#div'+$(this).attr('target'));
var toggleDisplay = false;
if(objdiv.css('display')=="none"){
toggleDisplay = true;
}
jQuery('.targetDiv').hide();
objdiv.toggle(toggleDisplay);
});
});
Fiddle here...
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>
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);
});
I want to click on one divs link and open info on other div in same page. but i m not getting the expected result.
$("#sidebar a").click(function(e)
{
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<div class="sidebar">
<a href="#content1"</a><center>About NewLeaf</center><br>
<a href="#content2"</a><center>Vission</center><br>
<a href="#content3"</a><center>Cooperative Principles</center><br><br><br><br><br><br><br><br><br>
</div>
<div id="article">
<div id="content1" class="toggle" style="display:none">showknfdkjgbjbjdf the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the gffstuff2</div>
<div id="content3" class="toggle" style="display:none">show thegd stuff3</div>
</div>
</div>
Use eq() function to toggle corresponding div.
Note: Had to remove break-lines br from the DOM, to get right indexes. Use css styling instead.
$(".sidebar a").click(function(e) {
e.preventDefault();
$('.toggle').eq($(this).index()).toggle();
});
a {
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<div class="sidebar">
<a href="#content1">
<center>About NewLeaf</center>
</a>
<a href="#content2">
<center>Vission</center>
</a>
<a href="#content3">
<center>Cooperative Principles</center>
</a>
</div>
<div id="article">
<div id="content1" class="toggle" style="display:none">showknfdkjgbjbjdf the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the gffstuff2</div>
<div id="content3" class="toggle" style="display:none">show thegd stuff3</div>
</div>
</div>lt.
You are looking for an element with the id sidebar. But there's only an element with class sidebar.
So change $('#sidebar a') to $('.sidebar a')
Im trying to make the first target div always be visible when the page loads whilst the others become visible as the user selects the option. Currently they are all hidden as the page is loaded and only become visible once the buttons are clicked.
JS
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
HTML
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>
You can use $('.targetDiv:not(#div1)').hide() DEMO
$('.targetDiv:not(#div1)').hide();
$('.show').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
use :gt(0):-
:gt() Select all elements at an index greater than index within the matched set.
$('.targetDiv:gt(0)').hide();
Note:
target
This attribute specifies where to display the linked resource. (_self,
_blank, _parent, _top)
Use this attribute only if the href attribute is present.
Therefore I would recommend using data:-
<a class="show" data-target="1">Option 1</a>
and get the value using:-
$(this).data('target')
Call .show() on the first div after hiding the others:
$('.targetDiv').hide();
$('#div1').show();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
Try this code
$(".targetDiv").not(':first').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
Another way you can simply hide div by css in HTML JSFiddle
HTML
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum 4</div>
Javascript
//$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});