I have some code that when a user clicks away from a side-bar the side-bar closes, How do I change it so when a user clicks a link the side-bar also closes and as well as from the side bar
Example - if I was to click the word Home, it would then hide the side-bar.
//hidding side header on click outside header
$body.on('mousedown touchstart click', function(e) {
if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) {
$sideHeader.removeClass('active-slide-side-header');
$body.removeClass('active-side-header slide-right');
$body.parent().removeClass('html-active-push-header');
var $toggler = $('.toggle_menu_side');
if (($toggler).hasClass('active')) {
$toggler.removeClass('active');
}
}
});
} //sideHeader check
<header class="page_header_side header_slide header-special header_side_right ds">
<div class="scrollbar-macosx">
<div class="side_header_inner">
<p class="text-right mb-0 close-wrapper">×</p>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Home</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Overview</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">About</h3>
</div>
attached is the image of the sidebar when opened
I would turn all of your close code into a function like so:
function closeMenu(){
if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) {
$sideHeader.removeClass('active-slide-side-header');
$body.removeClass('active-side-header slide-right');
$body.parent().removeClass('html-active-push-header');
var $toggler = $('.toggle_menu_side');
if (($toggler).hasClass('active')) {
$toggler.removeClass('active');
}
}
});
Then I would put the same handler that you have on the body on the links of the menu. Let's say your menu has an id of menu
So you would have:
$('body', '#menu a').onClick(function(){
closeMenu();
});
This will add the handler to the body as well as all a tags within the menu.
With the given code this is what I have done:
//hidding side header on click outside header
$('.scrollbar-macosx').on('click', function(e) {
//$sideHeader.removeClass('active-slide-side-header');
//$body.removeClass('active-side-header slide-right');
//$body.parent().removeClass('html-active-push-header');
//if you want to keep playing with adding and removing classes them:
//if (($toggler).hasClass('active')) {
$('#elementToHide').fadeOut();
//}
});
//sideHeader check
And them your html:
<header class="page_header_side header_slide header-special header_side_right ds">
<div class="scrollbar-macosx" id="elementToHide">
<div class="side_header_inner">
<p class="text-right mb-0 close-wrapper">×</p>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Home</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Overview</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">About</h3>
</div>
</div>
</div>
</header>
Here is the fiddle : fiddle
Related
I’m trying to build an accordion menu and for some reason I can’t get the accordion to function how I want.
Currently when the user clicks on the accordion div, the hidden-textarea div gets added with an active-accordion class wherever it's referenced.
How do I get the active-accordion class to only be added to the current clicked accordion div? Not all of them. I need to be able to toggle between each accordion div that is clicked.
Any help is gladly appreciated.
Thanks!
HTML
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion”>
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="roles-description accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion">
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.active-accordion {
display: block !important;
}
.hidden-textarea {
display: none;
}
JS
TestJs.HorizontalAccordion.prototype.onResize = function() {
$(window).resize(function() {
if ($(window).width() < 1200) {
$('.accordion').on( "click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".hidden-textarea").addClass("active-accordion");
// $('.hidden-textarea').removeClass("active-accordion");
// $('.hidden-textarea').toggle("active-accordion");
return false;
});
}
if ($(window).width() >= 1200) {
}
});
};
Update: I updated the onclick function and am able to toggle successfully. Now I just need to open 1 accordion not all of them.
Any help is gladly appreciated. Thank you.
$('.horizontalAccordionV1 .accordion').on( "click", function() {
event.preventDefault();
// create accordion variables
var accordion = $('.hidden-textarea');
// toggle accordion link open class
accordion.toggleClass("active-accordion");
// toggle accordion content
accordionContent.slideToggle(250);
});
Problem solved! Added this to my JS click function and removed everything else.
$(this).find('.hidden-textarea').toggleClass('active-accordion');
I needed three panels to show or hide some of its content based on whether or not a button (p tag) was clicked, and then change the button text when it was clicked to say hide or show depending on the situation. However the hidden content is meant to be auto hidden on mobile devices so I've added some javascript to do this but now the button text change is messed up since its triggering on click. What I would like instead is to have the button text change if the 'clicked-hide' class is added and revert back if it's not. Help would be appreciated :)
HTML
<div class="col-sm compare-card">
<div class="compare-card-header">
<h4 style="display:inline-block">Title</h4>
<img src="images/tooltip.svg">
</div>
<div class="compare-card-balance">
<p class="benefit-title">title</p>
<p class="f-14">subtitle</p>
</div>
<div class="compare-card-attributes">
text here
</div>
<div class="compare-card-footer">
<p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
</div>
</div>
<div class="col-sm compare-card">
<div class="compare-card-header">
<h4 style="display:inline-block">Title</h4>
<img src="images/tooltip.svg">
</div>
<div class="compare-card-balance">
<p class="benefit-title">title</p>
<p class="f-14">subtitle</p>
</div>
<div class="compare-card-attributes">
text here
</div>
<div class="compare-card-footer">
<p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
</div>
</div>
<div class="col-sm compare-card">
<div class="compare-card-header">
<h4 style="display:inline-block">Title</h4>
<img src="images/tooltip.svg">
</div>
<div class="compare-card-balance">
<p class="benefit-title">title</p>
<p class="f-14">subtitle</p>
</div>
<div class="compare-card-attributes">
text here
</div>
<div class="compare-card-footer">
<p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
</div>
</div>
Javascript
//COMPARISON CARD SCRIPT---------------
//This wll show and hide the card attributes section inside the card
jQuery('.hide-show-attributes').on('click', function() {
jQuery('.compare-card-attributes').toggleClass('clicked-hide');
});
//This will toggle the text on the show hide p tag button messaging
jQuery(document).ready(function($) {
$('.compare-card-footer').find(".hide-show-attributes").click(function(){;
if($(this).find("span.toggleShow").first().text()=="Hide Details"){
$("span.toggleShow").text("Show Details");
}
else {
$("span.toggleShow").text("Hide Details");
}
});
});
//Mobile Switch - this will auto collapse the panel when the user is on mobile
if($(window).width()<600){
$(".compare-card-attributes").addClass("clicked-hide");
$('span.toggleShow').text('Show Details');
}
else {
$(".compare-card-attributes").removeClass("clicked-hide");
}
// this is used whenever the window is resized
$(window).resize(function(){
if($(window).width()<600){
$(".compare-card-attributes").addClass("clicked-hide");
}
else {
$(".compare-card-attributes").removeClass("clicked-hide");
}
});
//END COMPARISON CARD SCRIPT---------------
First of all i suggest you set .compare-card-attributes to hidden on mobile with CSS
#media only screen and (max-width: 600px) {
.compare-card-attributes {
visibility: hidden;
}
}
and also have a class of something along the lines of
.hidden {
visibility: hidden;
}
then your script will need to be (assuming these jquery methods are already working)
jQuery('.hide-show-attributes').on('click', function() {
const cardAttributes = $('.compare-card-attributes');
const toggleText = $(this).find("span.toggleShow").first();
cardAttributes.toggleClass('hidden');
if(cardAttributes.hasClass("hidden")){
toggleText.text("Show Details");
}
else {
toggleText.text("Hide Details");
}
});
I have written that blindly, so i hope that works / helps.
I suggest you use a more semantic element for your toggle too, like a button or div with a 'role=button' attribute.
When i click to show a toggle, it executes 2 times and again closing the toggle thereby hiding my contents.Could someone please help on this.
Here is the code:
html:
<div class="accordianbx">
<div class="acc_icon">
<div class="whyimgbx"> <span><img src="images/2.png" alt=""></span></div>
<h3>abcd <span>&xyzs </span></h3>
</div>
<div class="hospital acc_descrpbx">
<div class="innrleft_hospitalbx">
<h2>desc </h2>
<p>description</p>
Know More
</div>
</div>
</div>
jquery:
$('.acc_icon').unbind('click').click(function(){
// alert('came into toggle function');
$(this).parents('.accordianbx').find('.acc_descrpbx').slideToggle();
$(this).parents('.accordianbx').siblings().find('.acc_descrpbx').slideUp();
// alert('going out of toggle function');
});
I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!
I'm trying to write JQuery for a set of animated info boxes. Clicking on the title div.info-box__title should open the adjacent div.info-box__content and at the same time close any other open div.info-box__content
Update - should have specified, I also need ALL boxes to close when user clicks outside any .info-box.
Update 2 - Fiddle here: https://jsfiddle.net/q9orfsoy/
The markup is like this:
<section id="info-box-3" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
I always struggle with execution order issues with JS. What I have so far are two functions:
Opening:
$('.info-box__title').bind("click touchstart", function() {
// close the others and open this one
if($(this).next('.info-box__content').css('display') == 'none') {
$(this).next('.info-box__content').slideDown();
$(this).parents('.info-box').addClass('open');
$(this).parents('.info-box.open').siblings().children('.info-box__title').hide();
}
});
Closing:
// hide all when click anywhere else in the document
$(document).bind("click touchstart", function(event) {
// exclude the one that's currently open
if(!$(event.target).closest('.info-box.open').length){
$('.info-box__content').slideUp(function(){
$(this).parents('.info-box').removeClass('open');
});
}
});
What this code does is closes all the info-box__content divs when you click outside them. But if you click on another info-box__title it just opens that as well without closing the rest.
(Initially I thought adding a class of .open to the one that's opened would be enough, but I guess I've run into execution order issues?)
What's the best/recommended way to deal with something like this?
Try utilizing .index() , jsfiddle https://jsfiddle.net/q9orfsoy/1/
var titles = $(".info-box__title");
var content = $(".info-box__content");
titles.on("click touchstart", function(e) {
if ($(this).next(".info-box__content")
.is(":visible")) {
$(this).next(".info-box__content")
.slideUp()
} else {
content.slideUp()
.eq($(this).index(".info-box__title"))
.slideDown()
}
});
// ALL boxes to close when user clicks outside any `.info-box`
$(document).on("click touchstart", function(e) {
if ($(e.target).is(".info-box, .info-box *")) {
return
}
else {
content.slideUp()
}
})
.info-box__content {
display: none;
}
.info-box {
border: 1px solid black;
padding; 20px;
margin:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<section id="info-box-1" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title 1</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-2" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title 2</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-3" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title 3</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
Close all then open the one you want with the this object.
$('.info-box__title').click(function() {
$('.info-box__content').hide(); //or perform closing action
$(this).siblings('.info-box__content').show(); //or perform opening action
});
To close when clicking outside of any info box,
$('body').not('.info-box').click(function() {
$('.info-box__content').hide(); //or perform closing action
});
Here is a solution.
$('.info-box__title').click(function() {
var sibling = $(this).siblings('.info-box__content');
if(!sibling.is(':visible')){
$('.info-box__content:visible').slideUp();
sibling.slideDown(); }
else sibling.slideUp();
});
$(document).bind("click touchstart", function(e)
{
var open_content = $(".info-box__content:visible");
if (!open_content.parent().is(e.target)
&& open_content.parent().has(e.target).length === 0)
{
open_content.slideUp();
}
});
.info-box__title{background:grey;}
.info-box__content{
height:100px;
display:none;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section id="info-box-3" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-4" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-5" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
You could do:
$(document).bind("click touchstart", function(event) {
var $openBox = $(event.target).closest('.open');
$('.info-box__content').not($openBox).slideUp(function(){
$(this).parents('.info-box').removeClass('open');
});
});
This will select all boxes other than the one related to the click event.
Bonus explanation
The reason your current solution doesn't work is that your just checking to see if the open box exists, since it does, it then closes all elements with the class `.info-box__content'. Hope that makes sense!
Easily slideUp all class while using stop() to slideDown() or slideToggle() target section:
$('.info-box__title').click(function() {
$('.info-box__content').stop().slideUp();
$(this).find('.info-box__content').stop().slideDown();
});
$('body').not('.info-box').click(function() {
$('.info-box__content').stop().slideUp();
});