So I have tried everything and cannot seem to figure this out, what I have is an accordian that plugs in data dynamicly, what I need to happen is I need the id of the data to be pluged in as the id for the h3 section that then is in turn clicked and opened...
<script>
jQuery(function() {
jQuery( "#work" ).accordion({
collapsible: true,
active: 1});
});
</script>
So right now the first H3 will be open, but I want to be able to set which div by the H3 id
<h3 id='$record[wid]'>
<a id='clickable' href='#'>
<div class='workitem'>
<span class='mosaic-overlay'>
<div class='details'>
<a name='$record[wid]'></a>
<span class='title'>$record[title]
</span>
<br />
<span class='subtitle'>$record[subtitle]
</span>
</div>
</span>
<span class='mosaic-backdrop'>
<img src='/img/work/$record[image]' />
</span>
</div>
</a>
</h3>
On the accordion I use in my project, I just set the active to "h3#" + the id of the accordion fold I want to open.
<script type='text/javascript'>
jQuery(function() {
jQuery( "#work" ).accordion({
collapsible: true,
active: "h3#id"
});
});
</script>
I believe its the standard jQueryUI accordion, so hopefully it will work for you too.
For anyone else who came across this older topic, jQuery Accordion now uses a number based value for the "active" option > https://api.jqueryui.com/accordion/#option-active > 0 = the first accordion tab > 1 = the second accordion tab
etc. active: 1 will display the second accordion tab open/active. Additionally you probably want to use the autoHeight, clearStyle and heightStyle options so that you do not have additional whitespace at the bottom of the active accordion tab.
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($){
$( "#accordion" ).accordion({
collapsible: true,
active: 1,
autoHeight: true,
clearStyle: true,
heightStyle: "content"
});
});
/* ]]> */
</script>
Related
I have the below code that moves any clicked accordion panel to the top of the page. However, I have some accordion panels open by default, and I don't want the opened ones animating when someone closes them. Therefore, I want the "scroll to top" code to only apply to closed panels. So I guess I need it within some kind of "if statement" detecting the open/closed state. Any idea how to accomplish this?
<div id="accordion">
<!--Open panel by default-->
<h3 class="accordion">Question</h3>
<div class="content">
<p>text</p>
</div>
<!--Closed panel-->
<h3 class="accordion">Question</h3>
<div class="content">
<p>text</p>
</div>
</div>
<script>
jQuery(function() {
var defaultPanel = parseInt(getParamFirst('section'));
jQuery( "#accordion" ).accordion(
{active: defaultPanel,
autoHeight: false,
collapsible: true,
heightStyle: "content",
animate: 200}
).show();
});
//////////////////////////////////////////////////
//Fire the below code only on closed panels
//////////////////////////////////////////////////
jQuery('.accordion').bind('click',function(){
var self = this;
setTimeout(function() {
theOffset = jQuery(self).offset();
jQuery('body,html').animate({ scrollTop: theOffset.top - 110 });
}, 200);
});
</script>
Add .not('.ui-state-active'):
jQuery('.accordion').not('.ui-state-active').bind('click',function(){
...
have been struggling a bit with this.
How can I determine whether my jquery accordion tab is opened or closed?
<div id="accordion3" class="accordion">
<!-- D1 -->
<h3 class='ach plus' id="1">Assignment Initiation Form</h3>
<div style="width:100%;">
content
</div>
<!-- D2 -->
<h3 class='ach plus' id="2">Flag potential candidates</h3>
<div style="width:100%;">
content
</div>
</div>
was thinking along the lines of
$(document).on("opened", #accordion3, function(){
var id = $(this).find("id");
$(id).removeClass("plus").addClass("minus");
});
I want to swop a class from 'plus' to 'minus' on opening of accordion and vice versa.
help appreciated
$( ".selector" ).accordion({
beforeActivate: function( event, ui ) {
//write your code here
ui.newHeader.removeClass('minus').addClass('plus');
$('.ach').not('.plus').addClass('minus');
}
});
This link will help you know more http://api.jqueryui.com/tabs/#option-active
To get active tab index you can try below code:
var active = $( ".accordion" ).tabs( "option", "active" );
Also remember index starts with 0
I am trying to close and disable the accordion from a click event of a label.
When clicking the label. the accordion should be disabled and closed. I can make it disabled by using addClass method
$('#c5').addClass('ui-state-disabled');
<div class="accordionHeader">
<h3 id="c5">Advance Settings (C5)</h3>
<div class="accordionContent">my content</div>
</div>
For closing the accordion I tried using
$('#c5').prop('active',false);
$('#c5').attr('active',false);
neither one works.
I do not want to use before I have to call this from other control
$(".accordionHeader").accordion({
header: "h3",
collapsible: true,
active: false
});
From the API Documentation:
Setting active to false will collapse all panels. This requires the collapsible option to be true.
So, using the following HTML,
<div class="accordionHeader">
<h3 id="c5">Advance Settings (C5)</h3>
<div class="accordionContent">my content</div>
</div>
<label id='c5label'>Disable accordion <input type="checkbox" /></label>
this JS will start the accordion and close/disable on the first click on the label `#c5label':
<script>
jQuery(document).ready(function($) {
$(".accordionHeader").accordion({ collapsible: true });
$('#c5label').click(function(){
if( $( ".accordionHeader" ).accordion( "option", "active") === false )
return;
$('#c5').addClass('ui-state-disabled');
$( ".accordionHeader" ).accordion( "option", "active", false );
});
});
</script>
I'm using Builtby will FlipBook.
HTML
<div id="mybook">
<div title="This is a page title">
<h3>Yay, Page 1!</h3>
</div>
<div>
<h3>Yay, Page 2!</h3>
</div>
<div title="This is another title">
<h3>Yay, Page 3!</h3>
</div>
<div>
<h3>Yay, Page 4!</h3>
</div>
<div title="Hooray for titles!">
<h3>Yay, Page 5!</h3>
</div>
<div>
<h3>Yay, Page 6!</h3>
</div>
</div>
Jquery
$(function() {
$('#mybook').booklet({
menu: '#custom-menu',
pageSelector: true
});
});
The Demo is Here:
http://builtbywill.com/code/booklet/demos/pageselect
Now I want to change the default behavior of the Page Selector. We are getting the Page options on hover. I want to change it to Click functionality. When I Click on the Page Selector, it should display the Menu. When I click it on again, it should hide the Page selecor..Thanks.
Try the below jquery.
DEMO HERE
$('#mybook').booklet({
menu: '#custom-menu',
pageSelector: true,
manual: false,
hovers: false,
overlays: true
});
In your booklet.js file, change the line no. 577 //add hover effects to the below one
// add click effects
pageSelector.on('click.booklet', function () {
if (pageSelectorList.stop().height() == pageSelectorHeight)
{
pageSelectorList.stop().animate({height: 0, paddingBottom: 0}, 500);
}
else
{
pageSelectorList.stop().animate({height: pageSelectorHeight, paddingBottom: 10}, 500);
}
});
Try this:
//setter
$(".selector").booklet( "option", "hovers", false );
I'm trying to stick a tabs jQuery UI widget inside the dialog widget, but it is not working for me. I have a bunch of data being retrieved from the database and is being rendered on the screen. When a user clicks on a (+) button, a dialog should open with its contents being tabbed. For some reason this is not working. Here's my code:
The HTML structure is as follows:
<div id="tabs-{index}">
<ul>
<li>title1</li>
<li>title2</li>
</ul>
<div id="some-id-{index}>content</div>
<div id="another-id-{index}">content</div>
</div>
And here's my jQuery code:
$('#disease-read-more-dialog').dialog({
dialogClass: 'disease-read-more',
autoOpen: false,
modal: false,
draggable: false,
width: '500px',
open: function () {
$('#ui-dialog-title-disease-read-more-dialog').html($('#disease-read-more-dialog').attr('title'));
var content = $('#disease-read-more-dialog').find('.hidden-disease-info').first();
if (content.length > 0) {
var index = content.data('index');
var selector = '#read-more-tabs-' + index;
$(selector).tabs();
}
}
});
Note that the index is simply used because I've output all the data on screen on page load rather than doing an AJAX request (because the amount of data is relatively small), and then when the user clicks on the (+) I load the HTML content into the dialog. Hence the index is used to prevent messing up the tag ID's.
UPDATE:
It does not work as in the call to $(selector).tabs() does not do what it is supposed to do. So what actually gets rendered is an un-ordered list rather than a tabs control.
Any thoughts why this is not working?
The complete solution for displaying tabs widget inside dialogue widget using jQuery UI as below:
HTML:
<div id="dialgue" title="Tabs with Dialogue">
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">
Tab-1
</a>
</li>
<li>
<a href="#tabs-2">
Tab-2
</a>
</li>
<li>
<a href="#tabs-3">
Tab-3
</a>
</li>
</ul>
<div id="tabs-1">
<p>
Contents of Tab-1 has been displayed here...!
</p>
</div>
<div id="tabs-2">
<p>
Contents of Tab-2 has been displayed here...!
</p>
</div>
<div id="tabs-3">
<p>
Contents of Tab-3 has been displayed here...!
</p>
</div>
</div>
</div>
<input type="button" id="btndialogue" value="Show Dialogue with Tabs" />
CSS:
.ui-widget{
font-size:14px !important;
}
.ui-dialog-title{
font-weight:bold;
}
.ui-tabs .ui-tabs-nav{
font-size:13px;
}
.ui-tabs-panel{
font-size:12px;
}
JQuery:
$(function() {
$("#dialgue").dialog({
autoOpen: false,
modal: false,
draggable: false,
title: 'Tabs with Dialogue',
show: 'slide',
hide: 'slide',
width: '500',
open: function(event, ui) {
$("#tabs").tabs();
}
});
$("#btndialogue").click(function() {
$("#dialgue").dialog('open');
});
});
Note: Before test/run above script, need to include latest jquery.js, jquery-ui.js and jquery-ui.css files.
I have created a bin with the solution on http://codebins.com/codes/home/4ldqpbx