I have a page that when a user clicks a title, the following div toggles display.
I want to somehow say if any other divs are display:block then set them to display none first.
I have the following...
$('.office-title').click(function(){
$(this).next('div').slideToggle();
return false;
});
and my html markup is as such...
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
</office> is not a valid closing. The closing should be </div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
CSS:
.office
{
display: none;
}
and jquery:
$(function () {
$('.office-title').click(function () {
$(this).next('div').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
});
HERE YOU CAN CHECK
This should do it: http://jsfiddle.net/gKgJ7/
$('.office-title').click(function(){
$('.office').slideUp();
$(this).next('div').slideToggle();
return false;
});
note:
This is not a valid closing:
<div class="office">sadasd</office>
//---------------------^^^^^^^^----should be </div>
$('.office-title').click(function(){
$(this).next('div').slideToggle();
$(this).parent(".office-row").siblings().hide(); // this should help
return false;
});
This will close all the open div with animation and opens the required div
$('.office-title').click(function(){
var that = $(this);
if('.office').each(function() {
if($(this) == $(that).next('div')) {
$(this).slideToggle();
}
else {
if($(this).css('display')!=='none') {
$(this).slideToggle();
}
}
});
return false;
});
Try like below... it will work...
Fiddle : http://jsfiddle.net/RYh7U/83/
$(document).ready(function () {
$('.office-title').next('div').slideToggle();
$('.office-title').click(function(){
$('.office-title').next('div').slideUp();
$(this).next('div').slideToggle();
return false;
});
});
Related
I'd expect this to pop up an alert for any div I click inside the section id playGrid, but it does nothing.
<div id="playGrid" class="w">
<section>
<div id="0_0"></div>
<div id="0_1"></div>
<div id="0_2"></div>
<div id="0_3"></div>
<div id="1_0"></div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
JavaScript
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el){
el.addEventListener('click', function() {
alert(this.id);
});
});
I think the problem is that your code runs before the document is fully loaded. To run your code after page is loaded add event listener for 'DOMContentLoaded' event:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el) {
el.addEventListener('click', function() {
alert(this.id);
});
});
});
https://codepen.io/mikhailsidorov/pen/BaoPKoX
two options add content like so
<section>
<div id="0_0">content</div>
<div id="0_1">content</div>
<div id="0_2">content</div>
<div id="0_3">content</div>
<div id="1_0">content</div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
or use css by adding a class .content to all your divs :
.content{
height: 10px;
width:10px;
}
Something like this should work. Also, make sure your script is being executed after the page loads, not before. Use the defer tag on your <script> element or move the <script> element to the end of your body.
[ ...document.querySelectorAll('#playGrid section div') ].forEach((div) => {
div.addEventListener('click', (event) => {
alert(event.currentTarget.id);
});
});
So I was basically trying to create a drop-down list with jquery. I was successful in achieving but came across with a slight problem. Here's the code
HTML
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
JQUERY
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").slideDown();
});
$(".dropdown_container").mouseleave(function(){
$(".dropdown_container").slideUp();
});
});
Once I hover over the dropdown_heading the dropdown shows-up and I'm able to navigate over it but the only way the it slides back up is if i actually have the cursor in the dropdown_container. If I try to slide it up removing the mouse from dropdown_heading, the dropdown is still visible. How would I be able to slide the submenu back up when the mouse leaves both div_container and div_heading?
I've tried to execute this function but therefore I am unable to navigate over the container. Thanks.
$(".dropdown_heading").mouseleave(function(){
$(".dropdown_container").slideUp();
});
You can try a timer based solution like
jQuery(function($) {
var $target = $(".dropdown_container");
$('.dropdown_heading').hover(function() {
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown(500);
}, function() {
var timer = setTimeout(function() {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$target.hover(function() {
clearTimeout($(this).data('hoverTimer'));
}, function() {
$(this).stop(true, true).slideUp();
});
});
.dropdown_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect..
Try this,
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
I'm trying to create an accordion effect.
I can do so that the section is expanded but I can not figure out how to close one already open.
Can you give me a hand?
function cws_accordion_init (){
jQuery.fn.cws_accordion = function () {
jQuery(this).each(function (){
var sections = jQuery(this).find(".accordion_section");
sections.each( function (index, value){
var section_index = index;
jQuery(this).find(".accordion_title").on("click", function (){
jQuery(this).siblings(".accordion_content").slideDown("300");
sections.eq(section_index).addClass("active");
sections.eq(section_index).siblings().removeClass("active").find(".accordion_content").slideUp("300");
});
});
});
}
}
html
<section class='cws-widget'>
<section class='cws_widget_content toggle_widget'>
<div class='accordion_section featured_check_up'>
<div class='accordion_title'>title 1</div>
<div class='accordion_content' style='display: none;'>
<p>fhshjsjf isfi fhsuhsj dsihdisj dshd disd jdijd shd is disu</p>
</div>
</div>
<div class='accordion_section featured_check_up'>
<div class='accordion_title'>title 2</div>
<div class='accordion_content' style='display: none;'>
<p>djjdjdijisjdisjidjsijdisjdisjdis</p>
</div>
</div>
</section>
</section>
This will toggle the accordion that is selected and close all the others:
$(".accordion_title").on("click", function (){
$(this).siblings(".accordion_content").slideToggle("300");
$(this).addClass("active");
$(".accordion_title").not(this).removeClass("active");
$(".accordion_title").not(this).siblings(".accordion_content").slideUp("300");
});
I created an onboarding walkthrough tour for use in a SaaS App that is being loaded with A/B testing software. The tour automatically begins on initial page load. The user can close the tour at any time. I have used localStorage so the browser will recall at what point the user exits the page and that tour will start again at the further point in the tour. I also have a "replay" button that is disabled when the tour is running and enabled when the tour is finished or closed. The replay button's selector is ".tstour-replay". I am animating the movement of the tour steps by adding a class that is using CSS3 #keyframes rules and then delaying the removal of the class so that the animation will repeat if the user goes back and uses that Next animation again. Those are referred to as "popover-ani1", "popover-ani2" and so on.
I am having an issue that is not consistently happening so I cannot find a pattern that explains why it's happening. Sometimes, the Next and Back buttons of the individual tour modals, referred to in the code as #popoverid1, #popoverid2, and so on or #popoverback1, #popoverback2, and so on, will be disabled. They do not respond to clicks and they both have CSS hover effects that do not work properly. However, the close button, .popover-close, always works. I cannot figure out why sometimes the Next and Back buttons are just completely unclickable and lose their interactivity while the Close button is always fine.
I am fairly new to JavaScript and jQuery.
Here's my JavaScript code:
function tourFunction() {
$(".tstour-replay").addClass("tstour-replay-disable");
$("#tstour-start").click(function(){
//if clicked, do nothing
});
$("#popoverid1").click(function() {
$(".popover1").addClass("popover1-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover1").removeClass("popover1-ani");
}, 250);
});
$("#popoverid2").click(function() {
$(".popover2").fadeOut(50);
$(".popover3").delay(50).fadeIn(50);
});
$("#popoverback2").click(function() {
$(".popover2").addClass("popoverback2-ani").delay(200).fadeOut(50);
$(".popover1").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover2").removeClass("popoverback2-ani");
}, 250);
});
$("#popoverid3").click(function() {
$(".popover3").addClass("popover3-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popover3-ani");
}, 250);
});
$("#popoverback3").click(function() {
$(".popover3").addClass("popoverback3-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popoverback3-ani");
}, 250);
});
$("#popoverid4").click(function() {
$(".popover4").addClass("popover4-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popover4-ani");
}, 250);
});
$("#popoverback4").click(function() {
$(".popover4").addClass("popoverback4-ani").delay(200).fadeOut(50);
$(".popover3").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popoverback4-ani");
}, 250);
});
$("#popoverid5").click(function() {
$(".popover5").addClass("popover5-ani").delay(200).fadeOut(50);
$(".popover6").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popover5-ani");
}, 250);
});
$("#popoverback5").click(function() {
$(".popover5").addClass("popoverback5-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popoverback5-ani");
}, 250);
});
$("#popoverid6").click(function() {
$(".popover6").addClass("popover6-ani").delay(200).fadeOut(50);
$(".popover7").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popover6-ani");
}, 250);
});
$("#popoverback6").click(function() {
$(".popover6").addClass("popoverback6-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popoverback6-ani");
}, 250);
});
}
function tourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
$(".tstour-replay").addClass("tstour-replay-disable");
$(".popover1").fadeIn("fast");
});
}
function disableTourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
}
//END FUNCTIONS
$(".popover-btn-start").click(function() {
$(".tour-container").fadeOut();
$(".popover7").fadeOut();
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
tourReplay();
});
$(".popover-close").click(function(){
$(".tour-container").fadeOut();
$(".popover").fadeOut();
tourReplay();
});
//BEGIN FUNCTION TRIGGERS
var trigger_flag = localStorage.getItem('tstour');
if (!trigger_flag) {
disableTourReplay();
$(".popover1").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '1') { //clicked next1
disableTourReplay();
$(".popover2").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '2') { //clicked next2
disableTourReplay();
$(".popover3").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '3') { //clicked next3
disableTourReplay();
$(".popover4").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '4') { //clicked next4
disableTourReplay();
$(".popover5").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '5') { //clicked next5
disableTourReplay();
$(".popover6").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '6' || '7') { //got to last popover, finished tour or closed out
tourReplay();
}
//END FUNCTION TRIGGERS
//BEGIN LOCAL STORAGE SET
$(document).on("click", "#popoverid1", function(e){
localStorage.setItem('tstour', '1');
});
$(document).on("click", "#popoverid2", function(e){
localStorage.setItem('tstour', '2');
});
$(document).on("click", "#popoverid3", function(e){
localStorage.setItem('tstour', '3');
});
$(document).on("click", "#popoverid4", function(e){
localStorage.setItem('tstour', '4');
});
$(document).on("click", "#popoverid5", function(e){
localStorage.setItem('tstour', '5');
});
$(document).on("click", "#popoverid6", function(e){
localStorage.setItem('tstour', '6');
});
$(document).on("click", ".popover-btn-start", function(e){
localStorage.setItem('tstour', '7');
});
$(document).on("click", ".popover-close", function(e){
localStorage.setItem('tstour', '7');
});
And here is the HTML
<div class="tour-centered">
<div id="tstour-start" class="tstour-replay">How Does This Work?</div>
<div class="popover popover1">
<div class="popover-right">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Employees On Your Calendar</div>
<div class="popover-body">Here's Jane Deaux, a sample employee. I preloaded some events for her in your calendar.</div>
<div class="popover-footer">
<div class="popover-progress">1 of 6</div>
<div class="popover-buttons">
<div class="popover-next" id="popoverid1">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover2">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Calendar Events</div>
<div class="popover-body">Notice Jane's name on the calendar. Each listing is a scheduled or pending calendar event.
<br />
<br />Hover your mouse over her name to quickly see the event details.</div>
<div class="popover-footer">
<div class="popover-progress">2 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback2">Back</div>
<div class="popover-next" id="popoverid2">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover3">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add a New Calendar Event</div>
<div class="popover-body">Double-click on any day to create a new calendar event. Use Jane to try it out and deduct hours from her time-off banks.
<br /><br />Give it a try. I'll wait right here until you're done.<br /></div>
<div class="popover-footer">
<div class="popover-progress">3 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback3">Back</div>
<div class="popover-next" id="popoverid3">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover4">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Create More Calendar Events</div>
<div class="popover-body">Great job! You can also click this icon to create more calendar events.</div>
<div class="popover-footer">
<div class="popover-progress">4 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback4">Back</div>
<div class="popover-next" id="popoverid4">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover5">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Customize Your Calendar</div>
<div class="popover-body">Visit Preferences to customize your calendar event codes, create time-off plans, and much more.</div>
<div class="popover-footer">
<div class="popover-progress">5 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback5">Back</div>
<div class="popover-next" id="popoverid5">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover6">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add More Employees</div>
<div class="popover-body">When you're ready, add more of your employees and create calendar events for them.
<br />
<br />The more employees you load and track, the easier it is to avoid scheduling conflicts.</div>
<div class="popover-footer">
<div class="popover-progress">6 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback6">Back</div>
<div class="popover-next" id="popoverid6">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover7">
<div class="popover-content-final">
<div class="popover-title-final">Ready to Take Back Your Time?</div>
<div class="popover-btn-start">Start Tracking!</div>
<div class="popover-help">
<a href="https://tracksmart.zendesk.com/hc/en-us/requests/new" target="_blank">
I Need Some Help
</a></div>
</div>
</div>
</div>
I have this Markup, and the way this is supposed to work is the user click on the "icon arrow" and this following JS is supposed to fire which will display the hidden content, in other words opening the window. this works in another program, but is there any reason this is not firing.
Here is the markup:
<div data-bind="foreach {data:movies}">
<div class="content-item full bottom-border">
<div class="content-item-container">
<div class="movie-listing-header">
<a class="icon arrow"></a>
<div class="movie-details">
<div class="title"></div>
<div class="info">
<div>
<span class="rating" data-bind="css: 'rating-' + (MovieRating || 'NR').toLowerCase().replace(/-/, '')"></span>
</div>
</div>
</div>
<a class="icon right-arrow"></a>
</div>
<div class="showtimes">
<div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>
</div>
</div>
</div>
</div>
and here is the .js
$(document).ready(function () {
$('.icon.arrow').click(function () {
var active_el = $(this);
$('.movie-listing-header').each(function () {
if ($(this).get(0) === active_el.parent().get(0)) {
if ($(this).hasClass('active')) {
$(this).siblings('.showtimes').hide();
} else {
$(this).siblings('.showtimes').show();
}
$(this).toggleClass('active');
} else {
$(this).removeClass('active');
$(this).siblings('.showtimes').hide();
}
});
});
});