i'm creating a navbar. when i click one of the options , that option becomes active but when i click on the other option the previous option which was active remains there
SEE MY FIDDLE EXAMPLE : https://jsfiddle.net/bpmbu3th/
I just want to make the item active which is clicked
MY HTML
<p id="parent1">i'm the parent</p>
<p id="child1">i'm the first child</p>
<p id="parent2">i'm the 2nd parent</p>
<p id="child2">i'm the second children</p>
MY CSS
#parent1{
background-color:#000;
color:#fff;
}
#child1{
display:none;
background-color:red;
color:#fff;
}
#parent2{
background-color:#000;
color:#fff;
}
#child2{
display:none;
background-color:red;
color:#fff;
}
MY JQUERY
(function(){
var object = {
dropdown1:$('#child1'),
dropdown2:$('#child2'),
dropdown1parent: function(){
if(object.dropdown1.is(':hidden')){
object.dropdown1.fadeIn();
}
else{
object.dropdown1.fadeOut();
}
},
dropdown2parent: function(){
if(object.dropdown2.is(':hidden')){
object.dropdown2.fadeIn();
}
else
{
object.dropdown2.fadeOut();
}
}
};
$('#parent1').on('click', object.dropdown1parent);
$('#parent2').on('click', object.dropdown2parent);
})();
You should use common class to get rid of repetitive code.
Here's an example
$(function() {
$('.parent').on('click', function() {
var child = $(this).next('.child'); //Finds the next child
//fade out others then handle current child
$('.child').not(child).fadeOut(function() {
child.fadeToggle();
})
});
});
.parent {
background-color:#000;
color:#fff;
}
.child {
display:none;
background-color:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="parent">i'm the parent</p>
<p class="child">i'm the first child</p>
<p class="parent">i'm the 2nd parent</p>
<p class="child">i'm the second children</p>
You just have to add two lines of code in your javascript, here is the edited snippet -
dropdown1parent: function(){
if(object.dropdown1.is(':hidden')){
object.dropdown1.fadeIn();
object.dropdown2.fadeOut(); //this line
}
else{
object.dropdown1.fadeOut();
}
},
dropdown2parent: function(){
if(object.dropdown2.is(':hidden')){
object.dropdown1.fadeOut(); //this line
object.dropdown2.fadeIn();
}
else
{
object.dropdown2.fadeOut();
}
}
Is that you wanted?
You need to fade out the other one:
(function () {
var object = {
dropdown1: $('#child1'),
dropdown2: $('#child2'),
dropdown1parent: function () {
if (object.dropdown1.is(':hidden')) {
object.dropdown1.fadeIn();
object.dropdown2.fadeOut();
} else {
object.dropdown1.fadeOut();
object.dropdown2.fadeOut();
}
},
dropdown2parent: function () {
if (object.dropdown2.is(':hidden')) {
object.dropdown2.fadeIn();
object.dropdown1.fadeOut();
} else {
object.dropdown1.fadeOut();
object.dropdown2.fadeOut();
}
}
};
$('#parent1').on('click', object.dropdown1parent);
$('#parent2').on('click', object.dropdown2parent);
})();
https://jsfiddle.net/ghorg12110/bpmbu3th/1/
You should think about creating a function to manage that, it will become a nightmare if you use a lot of "dropdown".
Related
New to Javascript. I recently posted a question about creating multiple multilayer accordions. I got some great feedback, but someone mentioned that if my HTML was set up correctly, I could achieve the same goal by using nextElementSibling and thus have much cleaner JS.
I figured out how to do this using only queryselect. See the below example:
HTML:
<div class="mainAccordion">
<h2>dropdown one</h2>
<h3>dropdown two</h3>
<p>content content content content</p>
</div>
CSS:
.mainAccordion {
background-color:lightblue;
width:200px;
margin:auto;
padding:3%;
}
.mainAccordion :nth-child(1){
background-color: blue;
padding:3%;
cursor:pointer;
color:white;
}
.mainAccordion :nth-child(2){
background-color:yellow;
cursor:pointer;
max-height:0;
overflow:hidden;
}
.mainAccordion :nth-child(3){
font-weight:bold;
max-height:0;
overflow:hidden;
}
And the JS:
var mainAccordion = document.querySelector(".mainAccordion").addEventListener("click", function(e) {
if (e.target.nextElementSibling.style.maxHeight) {
e.target.nextElementSibling.style.maxHeight = null;
} else {
e.target.nextElementSibling.style.maxHeight = e.target.nextElementSibling.scrollHeight + "px";
}
});
This works as intended. However, when I introduce multiple multilayer accordions and switch to "querySelectorAll", it stops working. Also depending on the browser, I sometimes get an error message saying my "addEventListener" is not a function.
See below:
HTML:
<div class="mainAccordion">
<h2>dropdown one</h2>
<h3>dropdown two</h3>
<p>content content content content</p>
</div>
<div class="mainAccordion">
<h2>dropdown one</h2>
<h3>dropdown two</h3>
<p>content content content content</p>
</div>
CSS:
body {
display:flex;
width: 900px;
margin:auto;
}
.mainAccordion {
background-color:lightblue;
width:200px;
margin:auto;
padding:3%;
}
.mainAccordion :nth-child(1){
background-color: blue;
padding:3%;
cursor:pointer;
color:white;
}
.mainAccordion :nth-child(2){
background-color:yellow;
cursor:pointer;
max-height:0;
overflow:hidden;
}
.mainAccordion :nth-child(3){
font-weight:bold;
max-height:0;
overflow:hidden;
}
and JS:
var mainAccordion = document.querySelectorAll(".mainAccordion").addEventListener("click", function(e) {
if (e.target.nextElementSibling.style.maxHeight) {
e.target.nextElementSibling.style.maxHeight = null;
} else {
e.target.nextElementSibling.style.maxHeight = e.target.nextElementSibling.scrollHeight + "px";
}
});
I've tried changing "querySelectorAll(".mainAccordion") to getElementsByClassName("mainAccordion") but also doesn't work.
Is forEach somehow involved?
Note: I know you can also achieve the same goal by toggling a class that has the "max-height:0;overflow:hidden". However, this was how I was initially taught to do accordions.
This is for my own practice.
I appreciate the help.
Try this:
let accordionElements = document.querySelectorAll(".mainAccordion");
accordionElements.forEach(element => {
element.addEventListener("click", function(e) {
if (e.target.nextElementSibling.style.maxHeight) {
e.target.nextElementSibling.style.maxHeight = null;
} else {
e.target.nextElementSibling.style.maxHeight = e.target.nextElementSibling.scrollHeight + "px";
}
})
});
It's because with querySelector() an HTML Element is return. With querySelectorAll() it's a NodeList. In your sample code you try to attach an event to a node list which is not possible.
You need to loop inside and then attaching the event to each HTML Element inside.
i think that the problem is that the querySelector() returns the first Element within the document that matches the specified selector. then the event listener will be applied to the first element found.
the querySelectorAll() returns a list. you could use it with forEach like this
var mainAccordion = document.querySelectorAll(".mainAccordion");
console.log(mainAccordion);
mainAccordion.forEach(accordion => {
accordion.addEventListener("click", function(e) {
if (e.target.nextElementSibling.style.maxHeight) {
e.target.nextElementSibling.style.maxHeight = null;
} else {
e.target.nextElementSibling.style.maxHeight =
e.target.nextElementSibling.scrollHeight + "px";
}
});
});
I am trying to make a blue square show if fullScreenCropStatus = true and a red square show if fullScreenCropStatus = false once the 'Done' button is clicked.
The variable is correct and is showing the correct value, but the blue square does not show when 'Done' is clicked. I tried show()/hide() and also the current format of setting the display value in css but neither make the blue square appear.
The red square successfully hide() or display:none. I am really baffled on this.
The code is below and this is the JSbin
JS:
var fullScreenCrop = false;
var fullScreenCropStatus = false;
$('#cropping--modes').click(function() {
fullScreenCrop = !fullScreenCrop;
console.log("fullScreenCrop = " + fullScreenCrop);
});
$("#done").click(function() {
fullScreenCropStatus = fullScreenCrop;
console.log("fullScreenCropStatus = " + fullScreenCropStatus);
if (fullScreenCropStatus === true) {
$(".done--title__container").css("display", "none");
$(".done--title__container--fullscreen").css("display", "block");
} else if (fullScreenCropStatus === false) {
$(".done--title__container").css("display", "block");
$(".done--title__container--fullscreen").css("display", "none");
}
});
HTML:
<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>
<div class="done--title__container">
<div class="done--title__container--fullscreen">
CSS:
.done--title__container { display:none; width:50px; height:50px; background-color:red; position:relative; }
.done--title__container--fullscreen { display:none;width:50px; height:50px; background-color:blue; position:relative; }
#cropping--modes { display:block; width:200px; height:30px; }
#done { display:block; width:200px; height:30px; }
Close the div tags and you're fine:
<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>
<div class="done--title__container"></div>
<div class="done--title__container--fullscreen"></div>
This question already has answers here:
Use jQuery to hide a DIV when the user clicks outside of it
(40 answers)
Closed 9 years ago.
Now I am closing the alert box when I clicked on the 'x' but I want to close the alertbox when I click outside of it.
Please see my code here :http://jsfiddle.net/Ur5Xn/
How to close alertbox clicking outside of it?
The jQuery:
$(document).ready(function(){
function showAlertBox(){
$("#alert").css("display","inherit");
$("#content").addClass("back");
}
function removeAlertBox(){
$("#alert").css("display","none");
$("#content").removeClass("back");
}
$("#alertClose").click(function(){
removeAlertBox();
});
$("#alertShow").click(function(){
showAlertBox();
});
});
try this code
$(document).ready(function(){
function showAlertBox(){
$("#alert").css("display","inherit");
$("#content").addClass("back");
}
function removeAlertBox(){
$("#alert").css("display","none");
$("#content").removeClass("back");
}
$("#alertClose").click(function(e){
e.stopPropagation();
removeAlertBox();
});
$("#alertShow").click(function(e){
e.stopPropagation();
showAlertBox();
});
$(document).click(function(e){
removeAlertBox();
});
});
This should work: http://jsfiddle.net/LagBE/
$(document).on('mouseup', function (e)
{
var alert = $('#alert');
// Make sure neither the alert,
// nor anything inside of it was clicked
if (!alert.is(e.target) && alert.has(e.target).length === 0)
{
removeAlertBox();
}
});
jsfiddle here
html:
<div id="alert">
<div id='transBG'></div>
<div id="alertbox">I am an alert box <span id="alertClose">X</span></div>
</div>
<div id="content">
Content <span id="alertShow">Show Alert Box</span>
</div>
css:
#alert {
display:none;
}
#alertbox{
border:1px solid #000;
position:fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
height:100px;
width:200px;
z-index:9;
}
#transBG{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:8;
}
.back{
opacity:0.5;
}
javascript:
$(document).ready(function(){
function showAlertBox(){
$("#alert").css("display","inherit");
$("#content").addClass("back");
}
function removeAlertBox(){
$("#alert").css("display","none");
$("#content").removeClass("back");
}
$("#transBG").click(function(){
removeAlertBox();
});
$("#alertClose").click(function(){
removeAlertBox();
});
$("#alertShow").click(function(){
showAlertBox();
});
});
Here is the update working code:
$(document).ready(function () {
function showAlertBox() {
$("#alert").css("display", "inherit");
$("#content").addClass("back");
return false;
}
function removeAlertBox() {
$("#alert").css("display", "none");
$("#content").removeClass("back");
return false;
}
$("#alertClose").click(removeAlertBox);
$("#alertShow").click(showAlertBox);
$('#alert').click(false);
$(document).click(removeAlertBox);
});
See http://jsfiddle.net/Ur5Xn/34/
I have a problem:
When I click on my '.glass' div it opens multiple '.permalinks' divs, but I just want to open the one I click.
This is my code:
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$('.permalinks').slideToggle(function() {
});
});
});
</script>
This is the CSS:
.permalinks {
display:none;
position:absolute;top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
}
.reblog, .link, .like {
display:inline-block;
margin:2%;
margin-top:45%;
padding:7% 7% 4% 7%;
}
.reblog, .link, .like {
width:10%;
}
.reblog {
background:#317FD4;
}
.link {
background:#38C264;
}
.like {
background:#ED4A4A;
}
.glass {
position:absolute;
top:0;
left:0;
background:#f3f3f3;
}
And this the html:
<div class="permalinks">
<div class="reblog"><center><img src=""></center></div>
<div class="link"><center><img src=""></center></div>
<div class="like"><center><img src=""></center></div>
</div>
<img class="glass" src="" width="5%">
If you could tell me what I've done wrong, please.
assign the click handler to .permalinks and use $(this).slideToggle()
$(window).ready(function() {
$('.permalinks').click(function() {
$(this).slideToggle();
});
});
http://jsfiddle.net/yRFSV/
If .permalinks is a child of .glass, then it's easy:
$(window).ready(function() {
$('.glass').click(function() {
$(this).find('.permalinks').slideToggle(function() {
});
});
});
If .permalinks is a child of .glass, then you can select it directly upon click.
$('.glass').on('click', function() {
$(this).find('.permalinks').slideToggle();
});
you probably want
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$(this).children('.permalinks').slideToggle(function() {
});
});
});
</script>
Two options:
.permalinks is after .glass in the DOM tree
Use $(this).next('.permalinks').slideToggle(function() {
.permalinks is before .glass in the DOM tree
Use $(this).prev('.permalinks').slideToggle(function() {
When using slideToggle, how to change the Text close/show?
I did a simple one, but cannot get the text change back.
Here is what I did:
$(document).ready(function(){
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
});
$('.open2').click(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
});
});
body{
font-size:20px;
}
#box{
border:2px solid #000;
width:500px;
min-height:300px;
}
.open,.open2 {
width:450px;
height:50px;
background:blue;
margin:5px auto 0 auto;
color:#fff;
}
.showpanel,.showpanel2{
width:450px;
height:300px;
margin:0 auto 10px auto;
background:red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div class="open">Show</div>
<div class="showpanel">This is content</div>
<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>
http://jsfiddle.net/9EFNK/
You can use the is() assertion method to check whether the panel is open or closed in the animation's callback and set the text accordingly - http://jsfiddle.net/9EFNK/7/
$('.open').click(function(){
var link = $(this);
$('.showpanel').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('close');
} else {
link.text('open');
}
});
});
Just add a simple if statement to test the text like so
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
if($(this).text() == 'close'){
$(this).text('Show');
} else {
$(this).text('close');
}
});
Like this DEMO
Not the prettiest of methods, but it does the job in a single statement.
$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');
Use .toggle()
Here is Working Demo
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
}).toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('Show');
});
check this may be user question is solve Fiddle
Here's an updated version http://jsfiddle.net/9EFNK/1/
You can simply toggle a class on close/open, perform a check for that class and change the contained text accordingly
if( $(this).hasClass('active') )
$(this).text('open');
else
$(this).text('Show');
$(this).toggleClass('active');
try this demo
$(document).ready(function(){
$('.open').toggle(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel').slideToggle('slow');
$(this).text('Show');
});
$('.open2').toggle(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel2').slideToggle('slow');
$(this).text('Show');
});
});
Use this
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
Here is how you use it
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
$('[data-toggle="offcanvas"]').click(function () {
$(this).toggleText();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button data-toggle="offcanvas" data-alt-text="Close">Open</button>
You can even use html provided it's html encoded properly