jQuery toggle content-div from menubar - javascript

I'm having trouble getting jQuery to allow only one content-DIV to be visible at a time. So that clicking between the menu buttons (about, newsletter, contact) this will allow only one content-DIV to be visible.
--- Then the content-DIV needs to hide when the associated menu button is clicked (like it does currently).
--- Upon clicking the header 'alliteration', any content-DIVs that are open need to hide.
$('#collapse_about').hide();
$('#collapse_newsletter').hide();
$('#collapse_contact').hide();
$('#menu1').click(function() {
$('#collapse_about').slideToggle(400);
return false;
});
$('#menu2').click(function() {
$('#collapse_newsletter').slideToggle(400);
return false;
});
$('#menu3').click(function() {
$('#collapse_contact').slideToggle(400);
return false;
});
I understand that this is a pretty simple bit of code... but the form of it evades me. Any help is much appreciated.

Off the top of my head I would assign all of the menus the same class such as class1. Then make the div slideUp which has a callback function. When the slideUp is finished it will slide down the correct panel.
$('#menu1').click(function() {
$(".class1").slideUp(function() {
$('#collapse_about').slideDown(400);
});
});
$('#menu2').click(function() {
$(".class1").slideUp(function() {
$('#collapse_newsletter').slideDown(400);
});
});
$('#menu3').click(function() {
$(".class1").slideUp(function() {
$('#collapse_contact').slideDown(400);
});
});
Edit: This is a start but doesn't entirely do as you are asking:(
Here is the demo on jsfiddle: here

Related

How can I close my accordion in a normal slideUp behavior ?

I have an accordion.
If I click on View Report - it will expand like this
If I click Hide Details - it will be back to original state.
JS
$saReport.click(function() {
console.log('R');
$saReport.addClass('hidden'); //hide
$saHide.removeClass('hidden'); //show
});
$saHide.click(function() {
console.log('H');
$saHide.addClass('hidden');
$saReport.removeClass('hidden');
$('.panel-collapse').removeClass('in');
});
Result
My accordion is closing very quick, like flashing hide.
How can I close my accordion in a normal slideUp behavior ?
Any hints / helps / suggestions on that will be much appreciated.
It would be usefull if you could post some relevant html.
If you you desire a simple slide behaviour you could either use the bootstrap accordion which is quite well documented.
If you want to implement it yourself, you could simply use the jquery slideUp() and slideDown() methods, i.e.:
$saReport.click(function() {
console.log('R');
$saReport.addClass('hidden'); //hide
$saHide.removeClass('hidden'); //show
// slide down your report (show)
$('.your-report-container').slideDown(400);
});
$saHide.click(function() {
console.log('H');
$saHide.addClass('hidden');
$saReport.removeClass('hidden');
$('.panel-collapse').removeClass('in');
// slide up your report (hide)
$('.your-report-container').slideUp(400);
});
These slide methods allow you to pass a parameter, which is the time in ms for the animation. The default is 400.

slide should take place from top to bottom

I am working on a hide-and-show functionality. I have two bugs in my code:
When I click the second div, the content is opening from down to top. How to make it from top to bottom?
When I click first it opens but when I click back first it does not close. How to fix it?
Providing my code below.
http://jsfiddle.net/2syzQ/33/
$(document).ready(function() {
$("#firstRadio").click(function() {
$("#secondHiddenDiv").hide("slow");
$("#firstHiddenDiv").show("slow");
});
$("#secondRadio").click(function() {
$("#firstHiddenDiv").hide("slow");
$("#secondHiddenDiv").show("slow");
});
$("#thirdRadio").click(function() {
$("#firstHiddenDiv, #secondHiddenDiv").hide("slow");
});
});

Collapsible Menu Not Staying Open

Hello ive followed the instructions from this webspage Add a Blogger-like collapsible archive block to your Drupal 7 site and suprised myself that everything seems to be 'sort of' working. As you can see from my 'collapsible block' on the right of THIS PAGE that the block doesnt seem to want to stay open when viewing other months. I dont think this was the intended behaviour.
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").children(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
var icon = $(this).children(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
Could anyone suggest anything to me to make the menu block open on a month when clicked and to close the other 'months'?
thanks
The problem is that the code you have is already added inside the file http://netmagpie.com/sites/all/themes/feverultra/js/feverultra.js and by adding your file after that, you're binding twice to the event and the function toggles twice, so the elements open and close
If you want to only have one month open then you need to close any open months before opening the one that was clicked, something like:
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").find(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
$('.view-collapsible-archive ul:visible').not($(this).next('ul')).slideUp();
var icon = $(this).find(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
It's because of this line:
$(this).siblings("ul").slideToggle
It says: "toggle the state of all the ul elements using a slide animation"
You will want to change this to slideDown when it's hidden in order to show it and slideUp when it's visible in order to hide it.
I would provide a code sample but I'm typing with one thumb on an iPhone at the moment.

jQuery slideToggle confusion

My problem:
Each individual header section opens a content section. One button expands and collapses all those sections. However, the button is not functioned the way I would like it. Instead, it opens all the closed sections and if any section was left open - it closes it.
Code:
$(".panelStyle").hide();
$("#ExpandAndCollapseButton").click(function () {
$(".panelStyle").slideToggle("medium");
});
$(".sectionLabels").click(function () {
$(this).next(".panelStyle").slideToggle("medium");
});
You don't want to use slidetoggle as a "force all open" animation. You want to use slideDown()
slideToggle will just toggle the current state. slideDown will force any that aren't open to open, but leave the ones that are open alone.
Please see my change below.
$(".panelStyle").hide();
$("#ExpandButton").click(function () {
$(".panelStyle").slideDown("medium");
});
$(".sectionLabels").click(function () {
$(this).next(".panelStyle").slideToggle("medium");
});
I added some logic to toggle all open/close. If none are open, then all are opened. If one or more is already open, the all are closed.
Here is the fiddle
http://jsfiddle.net/QwbNj/1/
Here is the code.
$("#clickme").click(function () {
if($(".openme:visible").length == 0){
$(".openme").slideDown();
} else {
$(".openme").slideUp();
}
});
$(".menuwrapper").click(function () {
$(this).find(".openme").slideToggle();
});

jQuery MouseEnter/Leave with fadeIn() flickery

I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)
My code:
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1").toggle();
$(element2).fadeIn(700);
},
function(){
$(element2).toggle();
$("#add-content-desc1").fadeIn(700);
});
}
any ideas ? thanks
Edit: I updated the code to the current version.
Try this
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1, element2").stop().toggle();
}, function(){
$("#add-content-desc1, element2").stop().toggle();
});
}

Categories