Hey guys I would like to be able to add a background behind the text "CLICK ME" when clicked, so it stays active until de-clicked. I currently have a slide and toggle format which is shown here, but I have been unable to figure out where I can add another active class within the current script.
http://jsfiddle.net/schermerb/rAMQT/
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
.toggleBtn {
font:14px noral Futura, sans-serif;
color:black;
margin:50px;
}
.below {
background:red;
}
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle();
});
});
You can toggle an active class:
In your JS: (note the $(this).toggleClass('active') line)
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
$(this).toggleClass('active');
return false;
});
CSS:
.toggleBtn.active{
background:blue;
}
http://jsfiddle.net/rAMQT/3/
Do like this:
Add an active class to the elment the clicked.
and when the slideToggle complete remove this class;
Javascript
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
var self = this;
$(this).addClass("active");
$(this).next('.below').slideToggle(function(){
$(self).removeClass("active");
});
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
var self = this;
$(this).addClass("active");
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle(function(){
$(self).removeClass("active");
});
});
});
Css
.active {
background-color: blue;
}
jsFiddle
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
if ( $( this ).hasClass( 'active' )){
$(this).removeClass('active');
}else{
$(this).addClass('active');
}
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle();
});
});
Here is the JSFIDDLE with the working code
Related
I have a show/hide toggle that switches between content if menu a is clicked.
Before the click function is triggered content is shown in the default div.
For some reason if you click one of the a tag's twice it successfully toggles the content on/off; however you are left with a blank screen
This is a poor user experience.
How can I avoid this and ensure that the default content is shown if a user selects a menu item twice?
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
Screen
Music
Art
Food
</div>
<div id="show-screen" class="show">show screen</div>
<div id="show-music" class="show">show music</div>
<div id="show-art" class="show">show art</div>
<div id="show-food" class="show">show food</div>
<div class="default">default content</div>
Thanks
Although I'd suggest a completely different approach to handle this problem, to make your code work, I'd do something like this.
https://jsfiddle.net/6cnt95ap/1/
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
window.setTimeout(()=>{
var showDefault = true, divs = $('.show');
divs.each(function(){
if($(this).css("display") !=='none'){
showDefault = false;
return false;
}
});
if(showDefault){
$('.default').removeClass('hidden');
}
}, 500)
});
})
<script>
$(".image-popup").on('click', function() {
$(this).find(".myModal").addClass("modal-active");
$(".modal-active").css("display", "block");
});
$(".close").on('click', function() {
$(".modal-active").css("display", "none");
var myVar = $(this).closest(".image-popup");
myVar.find(".myModal").removeClass("modal-active");
$(".modal-active").css("display","none");
});
</script>
I am attempting to have a modal appear and then disappear when I click the close button. The problem is that the removeClass() will not work and the "display", "none" will not override the first click function. Any Help?
My guess from your question and your comment above is that the event from your second handler is bubbling up to your first handler:
$(".image-popup").on('click', function() {
$(this).find(".myModal")
.addClass("modal-active")
.show();
});
$(".close").on('click', function(evt) {
evt.preventDefault();
$(this).closest(".image-popup")
.find(".myModal")
.removeClass("modal-active");
.hide();
});
Try to prevent the event from bubbling out of the .close handler by using evt.preventDefault();
You can fix it with this simple solution:
HTML
<div class="image-popup">
<div class="show-modal btn btn-success">Show Modal</div>
<div class="myModal">
<div class="close btn btn-success">Close</div>
<p>My Modal is active</p>
</div>
</div>
CSS
.modal-active .myModal{
display: block;
}
.myModal{
display:none;
}
.close{
color:red;
display:block;
}
JS
$(function(){
$('.show-modal').click(function(){
$(this).parent().addClass('modal-active');
});
$('.close').click(function(){
$(this).closest('.image-popup').removeClass('modal-active');
});
});
See this fiddle for more details https://jsfiddle.net/a3yze54w/1/
I have 2 click functions set up, the first one allows you to click and scroll through the .test divs. After this the .test:last-child is targeted to remove the red class, add the blue class and then fire a click function on the blue class div, and hide it. Only problem is it doesn't seem to recognise the click function on the .blue div and isn't working.
jsFiddle demo:
http://jsfiddle.net/neal_fletcher/adMYV/1/
HTML:
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
jQuery:
$(document).ready(function () {
$(".red").click(function () {
var next;
next = $(this).nextAll(".test");
$('html, body').animate({
scrollTop: next.offset().top
}, "slow");
return false;
});
});
$(document).ready(function () {
$('.test:last-child').removeClass('red').addClass('blue');
$('.blue').click(function () {
$(this).hide();
return false;
});
});
Any suggestions would be greatly appreciated!
Try like this:
http://jsfiddle.net/adMYV/3/
CODE
$(document).on("click", ".blue", function () {
$(this).hide();
return false;
});
You can do the click event on the .test selector.
And in the click function event to user hasClass jquery function and act as you want in each case.
EDIT:
Like this:
$(document).ready(function () {
$(".test").click(function () {
if($(this).hasClass('red')) {
var next;
next = $(this).nextAll(".test");
$('html, body').animate({
scrollTop: next.offset().top
}, "slow");
} else if($(this).hasClass('blue')) {
$(this).hide();
}
return false;
});
$('.test:last-child').removeClass('red').addClass('blue');
});
Take a look http://jsfiddle.net/adMYV/4/
So right now, I have a basic slide and toggle script which with help now has a background added to it when clicked. However, I would like it so when another "CLICK ME" is clicked it closes that div and opens the new div. In essence I don't want toggled divs constantly overlapping each other.
http://jsfiddle.net/schermerb/rAMQT/6/
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
.toggleBtn {
font:14px noral Futura, sans-serif;
color:black;
margin:50px;
cursor:pointer
}
.below {
background:red;
}
.toggleBtn.active{
background:blue;
}
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
$(this).toggleClass('active');
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle();
});
});
Try this way:
var $this = $(this);
$this.next('.below').slideToggle().siblings('.below').slideUp();
$this.toggleClass('active').siblings('.toggleBtn.active').removeClass('active');
instead of
$(this).next('.below').slideToggle();
Fiddle
Use this:
var the_others = $('.active').not(this);
the_others.removeClass('active');
the_others.next('.below').slideUp();
Fiddle
I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.
Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});
Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});