I ran into this problem that if I toggleClass on the same container using different links trying to show different content it wont show the container on any second link right away. Basically it will close the container and then I would have to click the link once again in order to show the content. I am trying to achieve tabs effect using the same container and toggleClass and unfortunately I can't figure out of how to show the container right away on second link. I would appreciate any advice.
Here is a live example http://jsbin.com/eyEnEvEC/1/
and the entire code.
CSS
.container {
display:none;
}
.show {
display:block;
}
HTML
Link 1
Link 2
<div class="container"></div>
Javascript
$(function(){
$('#link1').click(function(){
$('.container').html('Test 1');
$('.container').toggleClass('show');
return false;
});
$('#link2').click(function(){
$('.container').html('Test 2');
$('.container').toggleClass('show');
return false;
});
});
Try this
HTML
Link 1
Link 2
JQuery
$(function(){
$.fn.toggleContent = function(ahtml) {
var cstatus = $(this).attr("data-status");
$("a[id^=link]").attr("data-status","inactive");
if(cstatus == "inactive") {
$('.container').html(ahtml).show();
$(this).attr("data-status","active");
}
else {
$('.container').html(ahtml).hide();
$(this).attr("data-status","inactive");
}
return false;
};
$('#link1').click(function(){
$(this).toggleContent('Test 1');
});
$('#link2').click(function(){
$(this).toggleContent('Test 2');
});
});
Demo : http://jsbin.com/eyEnEvEC/9/edit
Related
So I'm about to hide the right side floating section when Popup exists: https://dev.resiliencelab.us/
So I was trying this jQuery code:
jQuery(document).ready(function(){
if (jQuery('#elementor-popup-modal-2607').css('display') == 'flex') {
jQuery('.right-floating-for-popup').css('display', 'none');
}
if(jQuery('.eicon-close').click()){
jQuery('.right-floating-for-popup').css('display', 'block');
}
});
But it didn't help. It completely hides the lightbox in the first place. I don't want to trigger hide show from the "Learn more" button because on the page load when popup shows, It also shold not show the floating section.
What's wrong with my code?
Well, I just solved this myself :)
Since this was a popup and popup triggering after 3 sec of page load, so I needed to run my jQuery code after 5 sec with the delay function.
Also changed some condition to check the click both close and learn more button. Finally I modified the code and resolved my issue:
jQuery(document).ready(function() {
setTimeout(
function() {
if (jQuery('#elementor-popup-modal-2607').css('display') == 'flex') {
jQuery('.right-floating-for-popup').css('display', 'none');
}
jQuery(".learn-more").click(function() {
jQuery(this).data('clicked', true);
if (jQuery('.learn-more').data('clicked')) {
jQuery('.right-floating-for-popup').css('display', 'none');
}
});
jQuery(".eicon-close").click(function() {
jQuery(this).data('clicked', true);
if (jQuery('.eicon-close').data('clicked')) {
jQuery('.right-floating-for-popup').css('display', 'block');
}
});
}, 3000);
});
Thank you!
I have a demo for 3rd Level Navigation that is not being triggerd correctly,
not sure where im missing something
DEMO
JS :
$(function(){
$(".dropdown-menu").css("height","auto");
$("#navigation div > .mobile-drop-button").on("click",function(e){
alert('1st level');
e.preventDefault();
if(!$(this).next().next().hasClass("current")){
$(".dropdown-menu").removeClass("current");
$(".dropdown-menu").slideUp();
$(this).next().next().addClass("current");
$(this).find('img').attr('src','/sites/all/themes/enfamil_base/assets/images/up_arrow_white.png');
$(this).parent().siblings().find('img').attr('src','/sites/all/themes/enfamil_base/assets/images/down_arrow_white.png');
$(".current").slideToggle();
}
else{
$(this).next().next().slideUp();
$(this).next().next().removeClass("current");
}
e.stopImmediatePropagation();
});
});
/*****
3rd level SUB NAVIGATION STARTS
******************/
$('a.mobile-drop-button.sub img').on("click", function(e){
alert('3rd level');
$(this).addClass('activeSubNav')
$(".dropdown-menu-sub").show();
e.preventDefault();
})
/*****
SUB NAVIGATION ENDS
******************/
Appreciate your help!
Thanks!!
I have fixed the Issue by using jQuery "slideToggle & sibblings()", as this HTML was so complicated that i dint find correct DOM Flow.
Finally Fixed :-)
JS :
$('#navigation .mobile-drop-button-sub').on('click', function(){
var abc = $(this).closest('.menu-option-sub').find('.dropdown-menu-sub').css({'height':'auto'}).height();
//$(this).closest('.menu-option-sub').find('.dropdown-menu-sub').closest('ul.dropdown-menu').css({'height': height + abc})
$(this).closest('.menu-option-sub').find('.dropdown-menu-sub').closest('ul.dropdown-menu').css({'height': height + abc})
$(this).closest('.menu-option-sub').find('ul.dropdown-menu-sub').slideToggle('fast', function(){
$(this).css('height', abc);
$(this).closest('.menu-option-sub').siblings().find('ul.dropdown-menu-sub').css('display','none');
/* $(this).closest('.menu-option-sub').parent('ul.dropdown-menu').css({
'height':'auto'
}); */
$(this).closest('.menu-option-sub').parent('ul.dropdown-menu').css({
'height':'auto'
});
});
})
so after some questioning i wrote a jsfiddle page to show you what im tried. When going over the link the div shows up but when the mouse goes over it it fadesout and again fadesin. Isnt posible that when going above the div it just stays there until you move the mouse away?
the example on jsfiddle works when you go above the menubar Crepes..
here´s my jquery code.. the css and html are on jsfiddle
thanks for the help!
http://jsfiddle.net/DFxB7/
<script type="text/javascript">
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").fadeIn();
},
function(){
$("#front").fadeOut();
});
</script>
add the event .stop() like this:
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").stop().fadeIn();
},
function(){
$("#front").stop().fadeOut();
});
DEMO
I believe this may give you the functionality you're after...
var toggle = 0;
$("#crep, #front").hover(function (e) {
if(toggle == 0)
{
toggle = 1;
$("#front").stop().fadeIn();
}else{
toggle = 0;
$("#front").stop().fadeOut();
}
});
I've got an accordion with arrow icons indicating when a section is open and closed. Once the accordion is opened the arrow points down showing the content below it.
However I've created a close button that gets appended into each section. This sits at the bottom of every section in the accordion.
I want it so that once the close button is pressed the arrow changes it's state back to closed.
$(function() {
$('#accordion h3').each(function(){
var $set = $(this).nextUntil("h3");
$set.wrapAll('<div />');
});
$('#accordion').accordion({ collapsible:true, active:true, heightStyle:"content", disabled:true, animated: false});
$('.ui-accordion-header').bind('click',function(){
theOffset = $(this).offset();
$(window).scrollTop(theOffset.top - 50);
});
$('#accordion h3.ui-accordion-header').click(function(){
var _this = $(this);
$('.ui-accordion-header-icon', _this).toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
_this.next().slideToggle();
return false;
});
$('.ui-accordion-content').append('Close<div class="clearfix"></div>');
$('.close').click(function(){
$(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');
$(this).parent().slideUp('slow', function(){
$(window).scrollTop(theOffset.top - 50);
var hidecollapsebutton = true;
$('.ui-accordion-content').each(function(){
if($(this).css('display') == 'block')
{
hidecollapsebutton = false;
}
});
if(hidecollapsebutton)
{
$('.accordion-expand-all').show();
$('.accordion-collapse-all').hide();
}
});
return false;
})
});
Any help would be much appreciated. I can provide more information if it's needed. Thanks.
http://jsfiddle.net/EZT6A/
$('.close').click(function(){
$(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');
As you could have found out yourself with a little simple debugging, $(this).closest('.ui-accordion-content') does not match any element here. (That’s because your close button is within div.ui-accordion-content, and the h3.ui-accordion-header is the previous sibling of that div element.)
Simple to fix: Go up to parent div (.ui-accordion-content), get previous h3 (.ui-accordion-header), and then the span (.ui-accordion-header-icon) element within it:
$(this).parents('.ui-accordion-content')
.prev('.ui-accordion-header')
.find('.ui-accordion-header-icon')
.removeClass('ui-icon-triangle-1-s')
.addClass('ui-icon-triangle-1-e');
http://jsfiddle.net/EZT6A/2/
I'd try changing click to on:
$(document).on("click", ".close", function(){
//change arrow state
});
It's because not every .close element exist as you binding click event.
I would like to create a slide down button to show the content of a DIV that has no height. I did an example here:
fiddle
I looked for this special form of sliding buttons but all I have found were examples where a DIV and its content has given width and height.
In my example the structure is different to that but it is quiet simple. There are three different divisions. A head with given height, the content div (depends from padding) that should be shown and below that the slider/trigger (also with given height) as a button.
Now I would like click on the trigger that slides down about the height of the content div and finally the content div should be appear.
It would be great if someone could help me out.
Thanks alot.
I think this is what you are looking at.
Fiddle
$(document).ready(function () {
$('.content').hide(); //hide initialy
$('.slide').click(function () {
var $this = $(this);
// target only the content which is a sibling
$(this).siblings('.content').slideToggle(200, function () {
$this.text($(this).is(':visible') ? 'click to close' : 'click to open');
});
});
});
You should try slideToggle() instead (it also helps when jQuery is loaded, but that was probably just an oversight when you made it):
$(document).ready(function () {
$('.slide').click(function () {
$(this).prev('.content').slideToggle(500, function () {
$this = $(this);
$slide = $('.slide');
if ($this.is(':visible')) {
$slide.text('Click to close');
} else {
$slide.text('Click to open');
}
});
});
});
fiddle