close a collapse panel(accordion) from other control - javascript

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>

Related

jQuery UI Accordion - "If Statement" for Open/Closed Panels

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(){
...

determing which tab has been opened and closed jquery accordion

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

Jquery Accordion, Set Active by ID

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>

How to trigger('click') on jquery tab's currently active tab

I have a tabed screen and want to trigger a click on the selected tab once the form is submitted and the return is valid. Here a part of the html:
<ul id="tabUL" class="tabs js-tabs same-height">
<li class="current">
<a class="tabLink" href="#tabProducts" data-url="/bla/bla">Products</a>
</li>
</ul>
My success command is :
success: function(data, textStatus, XMLHttpRequest) {
$('#tabUL').find('li.current a').trigger('click');
}
This seems not working... Any help is appreciated :) Regards Andrea
Try using the a[href=""] selector:
$('#tabUL a[href="#tabProducts"]').trigger('click');
I put together a jsfiddle demo to show it in action, and how to optionally hide the other tabs since often when I'm programmatically forcing tabs its to require missing mandatory information be entered on the initial tab before unlocking the other tabs...
Edit
Here is the contents of the jsfiddle:
HTML
<div id="tabs">
<ul>
<li>Address</li>
<li>Shipping</li>
<li>Parts</li>
<li>Datasheets</li>
</ul>
<div id="tab0">
<h1>This is the first tab (0)</h1>
</div>
<div id="tab1">
<h1>This is the second tab (1)</h1>
</div>
<div id="tab2">
<h1>This is the third tab (2)</h1>
</div>
<div id="tab3">
<h1>This is the fourth tab (3)</h1>
</div>
</div>
<br/>
Select the
<select id="tabSelect">
<option value="0">1st</option>
<option value="1">2nd</option>
<option value="2">3rd</option>
<option value="3">4th</option>
</select>Tab and
<input type="checkbox" id="tabHide" checked="checked" /> Lock the Others
jQuery
$(document).ready(function () {
$('#tabs').tabs();
$('#tabSelect').change(function () {
//pass empty array to unlock any locked tabs
$('#tabs').tabs({disabled: []}).find('a[href="#tab' + $(this).val() + '"]').trigger('click');
if ($('#tabHide').prop('checked')) {
//hide will be an array like [0,2,3]
var hide = Array();
$('#tabs li').not('.ui-tabs-active').each(function () {
hide.push($(this).index());
});
$('#tabs').tabs({disabled: hide});
}
});
});
If you want to reload the tab programmatically then i recommend use Jquery Tab API utility like below:
This makes first tab active and then activates second tab, quite simple and also raises the events that would be normally raised when you click directly.
$( "#myTabs" ).tabs( "option", "active", 0 );
$( "#myTabss" ).tabs( "option", "active", 1 );
Also you can catch tabs active event like below for performing any operations
$( "#myTabs" ).on( "tabsactivate", function( event, ui ) {
// your custom code on tab click
});
rather than trying to trigger the click event itself (which I believe is not possible to invoke a user event programatically in this context), I suggest that you trigger the function that has to be called on click event, you might want to look into triggerHandler

How to cancel sortable for both header and content in portlet

I want to cancel sortable portlet option for two div classes.I have tried below coding,
My Div:
<div class="column">
<div class="portlet>
<div class="portlet-header
<div class="portlet-content">
</div>
</div>
Tried to cancel sortable:
$( ".column").sortable( "option", "cancel", '.portlet-header');
$( ".column").sortable( "option", "cancel", '.portlet-content');
It doesn't cancel sortable for both header and content.But if i cancel header only, it cancels otherwise if cancel content only, it cancels propely. I want to make cancel sortable for both.How to cancel for both header and content?
$(".column").sortable("option", "cancel", ".portlet-header, .portlet-content");
This code Works fine..
Try
$(".column").sortable("option", "cancel", ".portlet-header, .portlet-content");
$( ".column" ).sortable({
items: "div:not(.portlet-header,.portlet-content)"
});
check you html as well, at least it looks invalid :
<div class="portlet-header
'>' is missing
<div class="portlet-header">

Categories