Can i set first panel on Jquery automatically opened?
My accordion panel is close all.
This is my html
<div class="accordionx">
<div class="acitemx">
<h3>First Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Second Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Third Panel</h3>
<div class="accx">
This is the content
</div>
</div>
This is my JS script
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
});
This the JSFiddle Link http://jsfiddle.net/bupd32rq/
Thanks for your help
Panels that opened were added with current class, then put class current manually on first panel and respective div with style="display:block":
<div class="acitemx current">
<h3>First Panel</h3>
<div class="accx" style="display:block">
This is the content
</div>
</div>
Updated DEMO
you can just add .eq(0).click()
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
}).eq(0).click();
DEMO
Related
I have multiple instances of isotope running in separate tabs. Isotope functions just fine in one tab, but when i switch tabs my footer is overlaying the isotope container. it does this until i click on one of the isotope filter options. once i click one, then the footer gets pushed down. However, when i go back to the previous tab - this tab is now messed up. here are some screenshots to show what I mean.
this is what it should look like. and this is what the loads loads as
this is what it ends up looking like when i switch tabs. then if i click on "all" it goes back to normal (i guess this is where isotope turns on?) and if i go back to the first tab. it's broken like this section bad was.
here is my html and jquery
$(document).ready(function() {
loadCSS("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
// filtr menu
var navbutton = $('navbutton');
navbutton.on('click', function() {
$(this).siblings().removeClass('open').end().addClass('open');
});
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress(function() {
$grid.isotope('layout');
});
$('#filters').on('click', 'navbutton', function() {
var filtr = $(this).attr('data-filter');
$grid.isotope({
filter: filtr
});
});
$('#filters2').on('click', 'navbutton', function() {
var filtr = $(this).attr('data-filter');
$grid.isotope({
filter: filtr
});
});
$(function(){
$('ul.tabs li:first').addClass('active');
$('.block article').hide();
$('.block article:first').show();
$('ul.tabs li').on('click',function(){
$('ul.tabs li').removeClass('active');
$(this).addClass('active');
$('.block article').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
return false;
});
});
});
<!-- Image portfolio -->
<!--- tabs --->
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<ul class="tabs">
<li data-toggle="tab">Interior</li>
<li>Furniture</li>
<li>Environment</li>
</ul>
</div>
</div>
</div>
<!--- end tabs --->
<section class="block">
<article id="tab1">
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<!-- image Filter -->
<gallery-filter id="filters">
<navbutton data-filter=".bedroom">Bedroom</navbutton>
<navbutton data-filter=".kitchen">Kitchen</navbutton>
<navbutton data-filter=".livingroom">Living Room</navbutton>
<navbutton data-filter=".other">Other</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters4">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters">
<div class="grid-sizer"></div>
<div class="grid-item bedroom">
<!-- images go here -->
</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>
<article id="tab2">
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<!-- image Filter -->
<gallery-filter id="filters2">
<navbutton data-filter=".chair">Chairs</navbutton>
<navbutton data-filter=".table">Tables</navbutton>
<navbutton data-filter=".dresser">Dressers</navbutton>
<navbutton data-filter=".bed">Beds</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters3">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters2">
<div class="grid-sizer"></div>
<div class="grid-item chair">
<!-- images go here -->
</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>
</section>
<!-- End Image portfolio -->
while looking through stack overflow i found this post: Making a jQuery Isotope layout initialize inside a Bootstrap Tab
I tried out the code:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.grid').isotope('layout');
});
but i was unsure what to replace shown.bs.tab with and couldn't get it working. since this code applies to the bootstrap tabs (which i am not using)
any help is appreciated. thank you
I have same problem, I watch Making a jQuery Isotope layout initialize inside a Bootstrap Tab and try out but not work for me. and i found another solution for isotope in bootstrap tabs.
First of all you must create a div in your tab and Initialize in HTML isotope in your div like this:
<div class="tab-pane" id="messages">
<div class="grid-message" data-isotope='{"itemSelector": ".item-message" , "gutter":5 }'>
<div class="item-message"></div>
<div class="item-message"></div>
...
</div>
</div>
after that add this jquery code add to page for reCreate layout when tab clicked
$(document).ready(function () {
$(".nav-tabs a").click(function () {
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function (e) {
if (e.target.hash == '#messages') {
//for isotope
$('.grid-message').isotope('layout');
}
if (e.target.hash == '#Othertabs') {}
});
});
Working example: http://jsfiddle.net/Vc6Vk/38/
You need to run layout when the tab is clicked. Try this:
$(function(){
$('ul.tabs li:first').addClass('active');
$('.block article').hide();
$('.block article:first').show();
$('ul.tabs li').on('click',function(){
$('ul.tabs li').removeClass('active');
$(this).addClass('active');
$('.block article').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
$grid.isotope('layout'); //add isotope layout here
return false;
});
});
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");
});
See Here i create my css file for show paragraph
<div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" >photos</div>
<div id="rates" >Rates and Reviews</div>
</div>
see here, describe jquery code. please help in implements
<script type="text/javascript">
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
});
toggle() function is what you need to show or hide specific element.
.toggleClass only add or remove specific class but it will not work for adding hidden and show class at same time
Replace $(target).toggleClass('hidden show'); with $(target).toggle();
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$('#mainDiv').find('a').removeClass("active");
$(this).addClass('active');
$("#detailsDiv").children().hide();
$(target).toggle();
});
});
.active{
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv"><div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" id="detailsDiv" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" style="display: none;">photos</div>
<div id="rates" style="display: none;">Rates and Reviews</div>
</div>
I have a page which has a number of collapsed DIVs showing content. I want to be able to link to this page and have the relevant DIV already open. E.g. Read about Section 2". This is the code I have to control the collapse and expand.
<script>
jQuery(function ($) {
$(".header").click(function () {
$header = $(this);
$span = $header.find(">:first-child"),
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500)
if ($span.text() == "-")
$span.text("+")
else {
$span.text("-")
}
});
});
</script>
<div class="container">
<div class="header" id="A">
<span>+</span>
<h2>Section1</h2>
</div>
<div class="content" id="B">
I'm the content for section 1.
</div>
<div class="header">
<span>+</span>
<h2>Section 2</h2>
</div>
<div class="content">
I'm the content for Section 2
</div>
</div> <!--- /container -->
Get id from url and then call click function to open this on document ready
$(document).ready(function(){
var id = location.search.split('page=')[1];
//find div of according clickable header. not sure which is in your code
$($("#"+id).prev()).trigger("click");
});
I am trying to use a link to open a specific tab that is created using divs and the tabs open and close using javascript.
Here are the tabs and the javascript is within the script tags at the bottom:
<div class="span12 module_cont module_tabs">
<div class="shortcode_tabs">
<div class="all_heads_cont">
<div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div>
<div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div>
<div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div>
<div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div>
</div>
<div class="all_body_cont">
<div class="shortcode_tab_item_body body1 it1">
<div class="ip">
%%Panel.ProductDescription%%
</div>
</div>
<div class="shortcode_tab_item_body body2 it2">
<div class="ip">
%%Panel.ProductReviews%%
</div>
</div>
<div class="shortcode_tab_item_body body3 it3">
<div class="ip">
%%Panel.ProductVideos%%
</div>
</div>
<div class="shortcode_tab_item_body body4 it4">
<div class="ip">
%%Panel.SimilarProductsByTag%%
%%Panel.ProductByCategory%%
%%Panel.ProductVendorsOtherProducts%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
</div>
</div>
</div><!-- .shortcode_tabs -->
<script type="text/javascript">
jQuery('.shortcode_tabs').each(function(index) {
/* GET ALL HEADERS */
var i = 1;
jQuery('.shortcode_tab_item_title').each(function(index) {
jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i);
jQuery(this).addClass('head'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this);
i++;
});
/* GET ALL BODY */
var i = 1;
jQuery('.shortcode_tab_item_body').each(function(index) {
jQuery(this).addClass('body'+i);
jQuery(this).addClass('it'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this);
i++;
});
});
jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active');
jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active');
jQuery('.shortcode_tab_item_title').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
jQuery('reviews').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
</script>
</div><!-- .module_cont -->
All I want to do is have a link on the same page that activates the reviews tab (id="reviews") and is also known as the body2.
all I have so far for my link is:
Reviews
Help. My brain hurts...
You just need to set the link up so that it doesn't take the user to a new page, and then setup a click event to open the tab up. Example:
HTML:
<a href='javascript:void(0);' id='reviewLink'>Review Tab</a>
JavaScript:
$('#reviewLink').click(function() {
$('.shortcode_tab_item_body').css({display:'none'});
$('.body2').css({display:'none'});
});
Or a jsfiddle here: http://jsfiddle.net/tKLhn/