I'd like all tabs to be collapsed on page load. Right now the first one is open by default:
$(document).ready(function($) {
$('#forms').find('.forms-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".forms-content").not($(this).next()).slideUp('fast');
});
});
HTML and CSS are here:
https://jsfiddle.net/re8x8cx3/
Place this inside dom ready,
$(".forms-content").hide();
Then the code will be,
$(document).ready(function($) {
$(".forms-content").hide();
$('#forms').find('.forms-toggle').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".forms-content").not($(this).next()).slideUp('fast');
});
});
Fiddle
Please also improve you JS:
(function($){
//store reusable global vars
var $forms = $('#forms'),
$formContents = $forms.find(".forms-content");
//hide on load
$formContents.hide();
//attach only on handler to #forms instead of to every tab separately
$forms.on('click', '.forms-toggle', function(event){
event.preventDefault();
//reuse this value (only on reference)
var $thisContent = $(this).next(),
//Expand or collapse this panel
$thisContent.slideToggle('fast');
//Hide the other panels
$formContents.not($thisContent).slideUp('fast');
});
});
Related
i have the following code which loads wordpress posts into a modal which works great. The only problem is that when one of the nav links are clicked it loads the next post without scrolling to the top.
Is there any way i can make the modal scroll to the top when one of the nav links are clicked ?
(function($) {
$(document).ready(function($){
$(document).on("click", ".esg-grid a, .postmodal .post-navigation a", function(event) {
event.preventDefault();
var post_url = $(this).attr("href");
var post_id = $(this).attr("rel");
$(".postmodal").load(post_url + " #main-content" );
$(".postmodal-container").removeClass("hidden");
//window.history.pushState("object or string", "Title", "/new-url");
return false;
});
});
})(jQuery);
Thanks,
Scott
This should scroll to the top of your modal. You can put it right after your load in the click listener to get it to scroll.
$(".postmodal-container").scrollTop(0)
I'm using FoundationPress and smoothstate on my WordPress page. Now on mobile, I created a menu using hamburgers and reveal modal and works fine but after clicking on something, the menu won't open anymore. I think this is because of the smoothstate.js not reloading the script.
As an option of the smoothstate, I have this script:
onAfter: function($container, $newContent) {
$( "#ham" ).click(function() {
$(".hamburger").toggleClass("is-active"); //you can list several class names
$('#abnavmodal').foundation('toggle');
event.preventDefault();
});
Here's my website. Note that the menu only appears on mobile.
I fixed the script by changing to the new Foundation 6 programmatic use plugin declaration
Here's my final script:
onAfter: function($container, $newContent) {
var $modal = new Foundation.Reveal($('#abnavmodal'), {
animationIn: 'slide-in-left',
animationOut: 'slide-out-left'
});
// Hamburgers
$( "#ham" ).click(function() {
$(".hamburger").toggleClass("is-active"); //you can list several class names
$modal.toggle();
event.preventDefault();
});
});
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn(1200);
});
});
This is for tabbed menu with contents (using jQuery, of course).
When I opening new tab, current contents fades out wery fast, but new tab contents opens slowly (as indicated 1200).
So, how can I edit this existing script to fade out contents slowly?
Example http://jsfiddle.net/2uts2kdt/7/
http://jsfiddle.net/2uts2kdt/9/
Check out the updated JSFiddle above. Basically you want to call the fadeIn once the fadeOut is complete. You need use promise().done() because the fadeOut is called on multiple elements. So once it is all done it will call the done code.
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).fadeOut(1200).promise().done(function() {
$(tab).fadeIn(1200);
});
});
});
If I understand correctly then you want to add a fadeOut call instead of just setting it to display:none
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).fadeOut(1200);
$(tab).fadeIn(1200);
});
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 have a accordion menu with very lengthy content. So I need to implement slide effect when accordion content is opened up.
Currently if you open up the first two menu items then the last item shows up the content below the viewport so I need to have the slide up effect for the accordion menu items.
Here is my code
$(document).ready(function () {
//Accordion
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
$(this).next(".menu_body").slideToggle(400);
var plusmin;
plusmin = $(this).children(".plusminus").text();
$(this).children("span.down-arrow").toggleClass("up-arrow");
});
});
DEMO
Check out this, Is this expected?
$(document).ready(function () {
//Accordion
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
$(".menu_body").each(function (event){
$(".menu_body").hide();
});
$(this).next(".menu_body").slideToggle(400);
var plusmin;
plusmin = $(this).children(".plusminus").text();
$(this).children("span.down-arrow").toggleClass("up-arrow");
});
});