How do I default an accordion to be closed on start-up. here is the sample view here
Here is the code:
<script>
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h3', effect: 'slide'});
});
</script>
<script>
// add new effect to the tabs
$.tools.tabs.addEffect("slide", function(i, done) {
// 1. upon hiding, the active pane has a ruby background color
this.getPanes().slideUp("slow").css({backgroundColor: "#fff"});
// 2. after a pane is revealed, its background is set to its original color (transparent)
this.getPanes().eq(i).slideDown("slow", function() {
$(this).css({backgroundColor: 'transparent'});
// the supplied callback must be called after the effect has finished its job
done.call();
});
});
</script>
You can do it like this:
$("#accordion")
.tabs("#accordion div.pane", {tabs: 'h3', effect: 'slide', collapsible: true})
.tabs('select', false);
This marks it as collapsible, then selects a tab that's not there to display, using false.
put in your css:
#accordion div.pane: display:none;
Related
Hi i use magnific pop up for an image gallery and i want to hide a div when the image zoom in and show it again when the image zoom out. This is my code :
$('.gallery-item').magnificPopup({
type: 'image',
gallery:{
enabled:true
},
mainClass: 'mfp-with-zoom', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out',
// CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
opener: function(openerElement) {
// openerElement is the element on which popup was initialized, in this case its <a> tag
// you don't need to add "opener" option if this code matches your needs, it's defailt one.
return openerElement.is('img') ? openerElement : openerElement.find('img');
}
}
});
Where should i put the the hide() and show() functions so they will be triggered same time with the magnific popup.
Don't use css for that, jQuery has built in functions for showing and hiding elements.
open: function(){
$(".main").hide();
},
close: function(){
$(".hidden-div").show();
}
Use this $( ".main" ).hide(); in your open function.
I want to change the CSS for the element btn1 (its a button) while its active.
I want to look different as long as "story" is shown (when pressed shows a div, as long as the div is shown i want the button to have a different color from the normal css)
$(function() {
$('#btn1').on('click', function() {
$('#story').fadeToggle(400);
});
});
$('#btn1').on('click', function() {
$(this).toggleClass('active'); // add/remove a css class
$('#story').fadeToggle(400);
});
in your css add
.active{
// styles you wish to apply
}
Try .css() method:
$('#btn1').on('click', function() {
$(this).css({'border':'1px solid blue', 'color':'red'});
$('#story').fadeToggle(400);
});
Working Example
:active selector https://developer.mozilla.org/en-US/docs/Web/CSS/:active
and look on this site http://www.paulund.co.uk/css3-buttons-with-pseudo-classes
It sounds like you want to do this:
$(function() {
$('#btn1').on('click', function() {
$(this).css('background-color','red'); // or whatever
$('#story').fadeToggle(400, function() { // 'complete' callback function
$('#btn1').css('background-color','white');
});
});
});
This is the JavaScript code where when the user clicks on a new tab the contents on that page have a fade out effect by setting the opacity to 0. However the flaw is that all links from other pages are still clickable because it is only the opacity that has changed. What edit can I make to this code to keep the animation but hide the page content after the animation. (The same animation is when the page loads, but the opacity changes to 1.)
Code:
jQuery(document).ready(function() {
/* How to Handle Hashtags */
jQuery(window).hashchange(function(){
var hash = location.hash;
jQuery('a[href='+hash+']').trigger('click');
});
/* Main Navigation Clicks */
jQuery('.main-nav ul li a').click(function() {
var link = jQuery(this).attr('href').substr(1);
if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
jQuery('.main-nav ul li a').removeClass('active'); //remove active
jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
complete: function() {
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
});
}
});
});
Can you please re-paste the code with the edits as I am not the best at JS.
Can you post your css and html? It's hard to diagnosis this, but you could use .fadeOut() or .animate({"display":"none"}). I'm not sure if this is what you need, you'll have to post the rest of the code.
Simply set the display property to none in the callback (or just call hide()):
complete: function() {
jQuery(this).hide();
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
Obviously you then have to take care to show the elements back again before animating them back in. ;-)
So I found a script to slide open multiple divs but I can't seem to get it to work. I thought it was something wrong with my main page, but I created a separate page and still can't seem to get it to work.
No messages in debugger, and no errors; but the DIV doesn't appear.
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type='text/javascript'>
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
</script>
<a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
It is working, for me. You forgot to call function showHide(), actually, and you can do it on this way:
$(document).ready(function() {
$('.show_hide').showHide();
});
http://jsbin.com/amuhom/1/edit
I have added one div and one button more. I guess this is expected behavior?
slides.js has virtually no documentation. I've got it set to automatically change the slide, and have the prev/next buttons hidden. Is there a way to also hide the "stop/play" button?
$(function () {
$("#slides").slidesjs({
play: {
active: false, /* this hides the stop/play button */
auto: true,
interval: 5000,
swap: true
}
});
});
use display none property of css
for example if your play button class is ".play" then put in css
.play
{
display:none;
}