I have a javascript hide/show div with 4 different divs going. It is working partially but not performing the way I would like. When I click one of the divs it opens up the hidden div, which is perfect, but when I click the other link to open up the other div I want the other one I clicked first to close and then the new one to open. Here is my javascript.
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggle('hide');
});
<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb">
<hr class="dark2">
<p></p>Whats in the Bag <i class="fa fa-angle-down" style="font-size:24px"></i></p>
</div>
</div></a>
<div id='content2' style="display:none">
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
</div>
// Hopefully you have some selector reference to target them all
var $all = $(".drops"); // Clearly I used .drops for example
$('[data-value]').on('click', function(event) {
var $target = $('#'+ this.dataset.value);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
Here's an improved example:
var $all = $(".togglable");
$('[data-toggle]').on('click', function(event) {
var $target = $(this.dataset.toggle);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;}
.hidden{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="#el1">TOGGLE1</a>
<a data-toggle="#el2">TOGGLE2</a>
<a data-toggle="#el3">TOGGLE3</a>
<div id="el1" class="togglable hidden">ELEMENT1</div>
<div id="el2" class="togglable hidden">ELEMENT2</div>
<div id="el3" class="togglable hidden">ELEMENT3</div>
Please try this
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggleClass('hide');
});
It will be better if you could give your divs a common class instead of ids so you could hide other divs using this common class like :
$('.common_class').addClass('hide');
If you cant you could loop through all the divs and hide them before showing the current clicked one :
$('[id^="hideshow"]').on('click', function(event) {
$('[id^="hideshow"]').each(function(){
$('#'+$(this).data('value')).addClass('hide');
});
dataValue_id = $('#'+$(this).data('value'));
$(dataValue_id).toggleClass('hide');
});
Hope this helps.
Snippet using common classes :
$('.common_class').on('click', function(event) {
$('.common_class_2').not($('.common_class_2', this)).addClass('hide');
$('.common_class_2', this).toggleClass('hide');
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='common_class'>DIV 1
<p class='common_class_2'>Content 1</p>
</div>
<div class='common_class'>DIV 2
<p class='common_class_2 hide'>Content 2</p>
</div>
<div class='common_class'>DIV 3
<p class='common_class_2 hide'>Content 3</p>
</div>
<div class='common_class'>DIV 4
<p class='common_class_2 hide'>Content 4</p>
</div>
Related
I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.
Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY
Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');
TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>
I have Two Divs with popular and others, i'm using jquery toggleClass for slideUp and Slidedown between two div sections currently its working fine but when i click on popular div its showing the contents of popular contents but not changing its icon with minus to plus and plus to minus vice versa for both divs can somebody help me out in resolving it Thanks!
http://jsfiddle.net/v9Evw/352/
Html
<div id="popular">
<div id="headerDivImg1" class="toggle1" id="popular_img" style='background:#4c97d0;height:30px;width:640px;'>
<span style='color:#fff;padding-left:10px;line-height:30px;'>DIV1</span>
<a class="toggle1" style='float:right;' id="popular_img" href="javascript:popular('popular_content', 'popular_img');">
</a>
</div>
<div id="popular_content" class="content" style="display: block;">
<p>welcome to Div1</p>
</div>
</div>
<br/>
<div id="others">
<div id="headerDivImg1" id="other_img" class="toggle2" style='background:#4c97d0;height:30px;width:640px;'>
<span style='color:#fff;padding-left:10px;line-height:30px;'>DIV2</span>
<a class="toggle2" style='float:right;' id="other_img" href="javascript:popular('popular_content', 'popular_img');">
</a>
</div>
<div id="other_content" class="content" style="display: block;">
<p>welcome to Div2</p>
</div>
</div>
JQUERY
$(document).ready(function()
{
var $content = $("#popular_content").show();
$(".toggle1").on("click", function(e)
{
$(this).toggleClass("expanded");
$content.slideToggle();
});
});
$(document).ready(function()
{
var $content = $("#other_content").hide();
$(".toggle2").on("click", function(e)
{
$(this).toggleClass("expanded");
$content.slideToggle();
});
});
CSS
.toggle1
{
display:inline-block;
height:27px;
width:41px; background:url("minus.png");
}
.toggle1.expanded
{
background:url("plus.png");
}
.toggle2
{
display:inline-block;
height:27px;
width:41px; background:url("plus.png");
}
.toggle2.expanded
{
background:url("minus.png");
}
I think this might help
HTML
<div class="div1container">
<div class="glyphicon glyphicon-plus divcontainer" data-toggle="collapse" data-target="#demo">Div1</div>
<div id="demo" class="collapse">
Div 1 Content
</div>
</div>
<div class="div2container">
<div class="glyphicon glyphicon-plus divcontainer" data-toggle="collapse" data-target="#demo2">Div2</div>
<div id="demo2" class="collapse">
Div 2 Content
</div>
</div>
CSS
.divcontainer{
background:aqua;
width:100%
}
Jquery
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
});
Please check this JSFiddle, Here there are two div named step-wrapper and inside these step-wrapper div there are three div named step-box. Its written in such a way that while clicking on a step-box div its background color changes to yellow.
I have added a reset button. What I needed is on clicking the reset button, the color of last clicked step-box div should changes to white. But in this code, when I click the reset button all the step-box background color changes to white.
I believe this is what you're looking for:
https://jsfiddle.net/richardgirges/8m9qstg3/11/
We're saving a reference to the lastClicked div, and targeting it specifically when reset is hit. Like so:
var $lastClicked = null;
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
$lastClicked = $(this);
});
$('.reset').on('click',function(){
if ( $lastClicked ) {
$lastClicked.css( 'background-color', '#fff' );
$lastClicked = null;
}
});
EDIT: Improved the code. Using explicit var instantiation to keep it within scope.
It looks kind of weird when you have only one reset button at the very end but only want to reset only one wrapper. How about if we add a reset button inside the wrapper div and resets only that wrapper when we click each reset? See if you like it.
HTML:
<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span>
</p>
</div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span>
</p>
</div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span>
</p>
</div>
<div class="reset"> Reset </div>
</div>
<br>
<br>Second Wrapper
<br>
<br>
<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span>
</p>
</div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span>
</p>
</div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span>
</p>
</div>
<div class="reset"> Reset </div>
</div>
Javascript:
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#eeffaa');
});
$('.reset').on('click',function(){
$( this ).parent().find(".step_box").css( 'background-color', '' );
});
Add class last to last clicked element and reset this one.
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
$('.last').removeClass('last');
$(this).addClass('last');
});
$('.reset').on('click',function(){
$( ".step_box.last" ).css( 'background-color', '' );
});
http://jsfiddle.net/8m9qstg3/7/
See this fiddle
What I have done is that, I've added an ID attribute to your step_box class and used the id to set a hidden field when the step_box is clicked. And later in the onClick of reset, i ve used the id that is set in the hidden field.
Please the code below..
JS
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
document.getElementById('test').value=this.id;
});
$('.reset').on('click',function(){
var a= document.getElementById('test').value;
$( "#"+a ).css( 'background-color', '' );
});
HTML
<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');" id="1"> <span>Content of page 1</span>
</p>
</div>
<div class="step_box" onclick="show('Page2');" id="2"> <span>Content of page 2</span>
</p>
</div>
<div class="step_box" onclick="show('Page3');" id="3"> <span>Content of page 3</span>
</p>
</div>
</div>
<br>
<br>Second Wrapper
<br>
<br>
<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');" id="4"> <span>Content of page 1</span>
</p>
</div>
<div class="step_box" onclick="show('Page2');" id="5"> <span>Content of page 2</span>
</p>
</div>
<div class="step_box" onclick="show('Page3');" id="6"> <span>Content of page 3</span>
</p>
</div>
</div>
<input type="hidden" id="test" />
<div class="reset">Reset</div>
http://jsfiddle.net/8m9qstg3/6/
I created a variable named last and assigned the clicked object to it. This way, when you hit reset, it will know what the last element is that was clicked. If you're looking for multiples you could create an array and use .push() to create a string of last elements clicked, but this should answer your question.
var last;
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
last = this;
});
$('.reset').on('click',function(){
$(last).css("background-color", "white");
});`
I have three (or more in the future) dropdown menus that are show when clicked on a 'trigger'
The code is functional but I want the slideUp animation to finish before another slideDown animation begins.
Note that the 'dropdown' elements are positioned absolutely, top:100% in relation to the 'container' so they appear under the 'triggers'
The code on Codepen
HTML
<div class="container">
<div class="drop-container">
<span class="trigger">Drop 1</span>
<div class="dropdown">
<p>First Dropdown</p>
</div>
</div>
<div class="drop-container">
<span class="trigger">Drop 2</span>
<div class="dropdown">
<p>Second dropdown</p>
</div>
</div>
<div class="drop-container">
<span class="trigger">Drop 3</span>
<div class="dropdown">
<p>Third dropdown</p>
</div>
</div>
</div>
jQuery
var $container = $('.drop-container'),
$trigger = $('.trigger');
$trigger.on('click',function(){
var $this = $(this).siblings('.dropdown');
$container.find('.dropdown').slideUp();
if($this.is(':visible')) {
$this.hide('fast');
}
else {
$this.slideDown();
}
});
You could just add a delay
$this.delay(500).slideDown();
but as pointed out it in the comments would be better to use the callback.
Codepen Example
There is a way to do this without using timers. You can basically add a class to the element that has slide down and use the "oncomplete" property of jQuery slide. Replace your javascript with the below and it should work live example here
$container = $('.drop-container')
$trigger = $('.trigger')
$trigger.on('click',function(){
var $drop = $(this).siblings('.dropdown')
$down = $container.find('.down')
if($down.length > 0){
$down.slideUp(function() {
$(this).removeClass('down')
$drop.addClass('down')
$drop.slideDown()
})
}
else{
$drop.addClass('down')
$drop.slideDown()
}
})
I've got six divs that act as buttons. When clicked, one of the spans in a different div (and class) is displayed, and others are hidden.
Buttons:
<div class="menu">
<div class="menubutton">
Menu1
</div>
.
.
.
<div class="menubutton">
Menu6
</div>
</div>
Info shown based on clicked button:
<div class="information">
<span class="information1"> Info1 </span>
...
<span class="information6"> Info6 </span>
</div>
How do I know which one called the function, so I can know which span to make visible?
Provided your markup is this way:
<div class="menu">
<div class="menubutton">
Menu1
</div>
<div class="menubutton">
Menu2
</div>
<div class="menubutton">
Menu3
</div>
<div class="menubutton">
Menu4
</div>
<div class="menubutton">
Menu5
</div>
<div class="menubutton">
Menu6
</div>
</div>
<div class="information">
<span class="information1"> information1 </span>
<span class="information2"> information2 </span>
<span class="information3"> information3 </span>
<span class="information4"> information4 </span>
<span class="information5"> information5 </span>
<span class="information6"> information6 </span>
</div>
You can do this:
$('.menubutton').click(function(){
var index = $('.menubutton').index(this); //get the index of the menubutton clicked
$('.information > span').eq(index).show().siblings().hide(); // show the corresponding information item based onthe clicked one's index and hide others.
});
Demo
with this you can safely remove the class with index like information1, information2 etc instead you can add a common class say content
<div class="information">
<span class="content"> information1 </span>
<span class="content"> information2 </span>
<span class="content"> information3 </span>
<span class="content"> information4 </span>
<span class="content"> information5 </span>
<span class="content"> information6 </span>
</div>
and change it to:
$('.menubutton').click(function(){
var index = $('.menubutton').index(this); //get the index of the menubutton clicked
$('.information > .content').eq(index).show().siblings().hide(); // show the corresponding information item based onthe clicked one's index and hide others.
});
Since you can't have ID's, we can get the index of the clicked menu item, add 1, then find the corresponding information span to show:
$(".menubutton").click(function() {
var menuIndex = $(this).index() + 1;
$(".information" + menuIndex).show();
});
The this keyword inside a function refers to the element that called the function.
Add the #id for each menubutton, so:
<div class="menubutton" id="btn_1"></div>
then:
$(".menubutton").on("click", function() {
// Get the id of button clicked.
var id = $(this).attr("id").split("_")[1];
// Target SPAN with the same id.
$("SPAN.information" + id).show();
});