w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Jquery UI accordion - Open two tabs in a controler
You can use your own accordion without using JQuery UI. Function for open one tab in accordion: activeContent = $(".accordion > div:has(" + /*item's text*/ + ")"); //your submenu item activeContent.show(); activeContent.siblings("div:visible").hide(); activeContent.prev("h3").addClass("active"); activeContent.prev("h3").siblings("h3").removeClass('active'); $(".accordion > div p").removeClass('selected'); $(".accordion > div " + /*item's text*/).addClass('selected'); And structure html should be: <div class="accordion"> <h3 class="subMenuItemHeader">Header1</h3> <div> <p class="submenuItem">Submenu item 1</p> <p class="submenuItem">Subm

Categories : Javascript

Responsive Tabs to Accordion - open tab from different page
I succeeded with this code, var stab = 2 // selected tab lis = $("ul.resp-tabs-list > li"); lis.removeClass("resp-tab-active"); $("ul.resp-tabs-list li[aria-controls='tab_item-"+stab+"']").addClass("resp-tab-active"); divs = $("#tabs .resp-tabs-container > div"); divs.removeClass("resp-tab-content-active").removeAttr("style"); $("#tabs .resp-tabs-container div[aria-labelledby='tab_item-"+stab+"']").addClass("resp-tab-content-active").attr("style","display: block;");

Categories : Jquery

Tabs within accordion Jquery
$( "#accordion" ).accordion({ heightStyle: "content", collapsible:true, active:false, activate: function( event, ui ) { var active = $(this).accordion( "option", "active" ); $('#tabs-' + active).tabs({ beforeLoad: function( event, ui ) { ui.jqXHR.error(function() { ui.panel.html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."); }); } }); } }); The idea is to assign your tab an id corresponding to its row and on activate event, you select this id through the accordion API, and by extension the tab container, then activat

Categories : Jquery

Jquery-ui: Reloading and refreshing accordions in inactive tabs sets height of accordion panels
Hi i believe ur issue is similar to this thread, pls check out these links. JQuery Accordion Auto Height issue http://jqueryui.com/accordion/#no-auto-height

Categories : Misc

Keep first div in jquery accordion open
You can manually fire the click handler for the first tab $(document).ready(function() { $(".expand-menu .menu_header").click(function() { if($(this).next("div").is(":visible")){ $(this).next("div").slideDown("slow"); } else { $(".expand-menu .category_list").slideUp("slow"); $(this).next("div").slideToggle("slow"); } }).first().click(); // or .trigger('click') });

Categories : Jquery

open second Accordion Menu tab using Jquery
<script> $(document).ready(function(){ $('#accordion li:eq(1)').show(); // second tab show $('#accordion li:eq(1) ul').show(); // second tab show $("#accordion > li").click(function(){ if($(this).next().is(':visible')) { $('#accordion > ul').slideUp(300); } $(this).next().slideToggle(300); }); }); </script>

Categories : Jquery

JQuery UI accordion: open tab on 'current' page
Ok - learnt a little more today... rather than trying to edit all the markup, I should merely simulate a 'click event. Simples. So rather than that bloated chunk of script code, I replaced with this: $(document).ready(function() { if ($('#accordion').length) { $('li.current-article').closest("div").prev("h3").click(); } }); This looks for the article marked 'current-article' and then 'clicks' it's associated h3 header.

Categories : Jquery

jquery accordion systematicaly open after two iterations
The problem is selector eq(0) and eq(1), they indicate your script would effect on just the first and second one of 'tiny-accordion' divs that it would found It should be updated looks like below $(document).ready(function() { $('div.tiny-accordion > div').hide(); $('div.tiny-accordion > h3').click(function() { var $nextDiv = $(this).next(); var $visibleSiblings = $nextDiv.siblings('div:visible'); if ($visibleSiblings.length ) { $visibleSiblings.slideUp('fast', function() { $nextDiv.slideToggle('fast'); }); } else { $nextDiv.slideToggle('fast'); } }); }); On my jsfiddle, I have set for you as example for 3 sets of accordion, check it out and try by yourself. Demo Reference of eq http://api.jquery.com/eq/ Edited: http://js

Categories : Jquery

Jquery accordion - open and close button
1) From your fiddle, you have misplaced the .slideDown and slideUp. 2 No need to hide the About and close. $open.on('click', function(e) { e.preventDefault(); $container.slideDown('fast'); //corrected it }); $close.on('click', function(e) { e.preventDefault(); $container.slideUp('fast'); //corrected it }); Check this JSFiddle Updates: Since you need to hide the link just get rid of my 2nd point. open.on('click', function(e) { e.preventDefault(); $open.hide(); // don't remove $container.slideDown('fast'); //corrected it }); $close.on('click', function(e) { e.preventDefault(); $container.slideUp('fast'); //corrected it $open.show(); // don't remove });

Categories : Jquery

make accordion in jquery will retain open on navigate
One way you could do it is to create a cookie using javascript that stores the open/close state of the accordion. On load of the page you are navigating to, check the value of that cookie and open the accordion as needed. Maybe not the best way, but it should work.

Categories : Jquery

jQuery accordion with MVC 4 Razor | keep the active pane open
You could post a hidden variable containing the panel that you want to be active when the post returns, add that to the viewbag, and then conditionally activate that panel. You'd have to show the form you're using for me to comment on how to post that additional variable, (don't know if its ajax, form, actionlink, etc), but here's what the rest would look like: public ActionResult MyPagingMethod(int page = 1, int? panel = null) // or whatever your action is { // do work ViewBag.PanelToOpen = panel; // return view } then javascript $("#accordion").accordion({ collapsible: true, clearStyle: true, heightStyle: "content", navigation: true,active:false }) @if(Viewbag.PanelToOpen != null) { $('#accordion').accordion('activate', @ViewBag.PanelToOpen); } Alternative

Categories : Jquery

open div on same page as bootstrap accordion with accordion heading
If you do not specify the wrap setting it defaults to "onLoad". This results with all JavaScript being wrapped in a function run after result has been loaded. All variables are local to this function thus unavailable in the global scope. Change the wrapping setting to "no wrap" and it'll work: Your bootstrap version file have some problem. I just changed it to this. <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"> </script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> Updated Fiddle See Here

Categories : Javascript

When clicking on a link inside the accordion menu, how can I keep the accordion menu open once the page is refreshed with new html content?
I suggest you try another menu selector based on your current url (because when your page refreshes you can't get menu item clicked before). It could be something like this (for receipt-printer.html page): $('.menu > li > ul:not(:has(li > a[href="receipt-printer.html"]))') It's hard coded but I think it could work for you. The value of current page you can get from window.location.pathname. For example like this: var url = window.location.pathname.split('/')[3] //because on your site you have relative url lauren/ootpik5/receipt-printer.html But it also hard coded and I'm not sure that it will work for any urls on your site. So full example of algorithm could be: var splittedUrl = window.location.pathname.split('/'); var href = splittedUrl[splittedUrl.length - 1]; var menu

Categories : Jquery

jQuery accordion automatically move to next accordion div if user hits the tab key on last input
You need to bind the Tab key press, on the last input field of a form, to the accordion function to activate the next section: $('#firstform input:text').last().on('keydown', function(e) { if (e.which == 9) { if (!e.shiftKey) { var active = $( "#accordion" ).accordion( "option", "active" ); $("#accordion").accordion( "option", "active", active + 1 ); } } }); You also need to activate the first input box of the next form, using the activate event of the accordion: $( "#accordion" ).accordion({ activate: function( event, ui ) { $("#secondform input:text").first().focus(); } }); The procedure is similar for the reverse case, as you can see in the fiddle.

Categories : Jquery

Responsive tabs to accordion issue
If what I understood is correct that you want to stop hiding the active div when clicked again. Just remove the else part... $('#nav').children('li').first().children('a').addClass('active') .next().addClass('is-open').show(); $('#nav').on('click', 'li > a', function() { if (!$(this).hasClass('active')) { $('#nav .is-open').removeClass('is-open').hide(); $(this).next().toggleClass('is-open').toggle(); $('#nav').find('.active').removeClass('active'); $(this).addClass('active'); } }); Check this Fiddle

Categories : Javascript

jquery accordion close first header on click and open second header, and vice versa
You need to prevent the default event for the accordion $("#myaccordion").accordion({event: false}); See the updated jsFiddle

Categories : HTML

Create one primefaces accordion with tabs of different colors
I found a solution. I added a titleStyleClass for each different colored tab: <p:accordionPanel multiple="true"> <p:tab title="Blue Tab" titleStyleClass="blueTab"> <h:panelGrid columns="1" cellpadding="10"> <h:outputText value="This tab must be blue" /> </h:panelGrid> </p:tab> <p:tab title="Red Tab" titleStyleClass="redTab"> <h:panelGrid columns="1" cellpadding="10"> <h:outputText value="This tab must be red" /> </h:panelGrid> </p:tab> </p:accordionPanel> and in my CSS file I set the background color for each titleStyleClass: .blueTab { background: blue; } .redTab { background: red; } It works fine. I hope this helps someone!!

Categories : Jquery

How can I make this horizontal accordion's tabs close upon a second click?
Here is what you're looking for I had to add another if statement and use your thought of an added opened2 class to get it functioning Here is the updated jQuery $(function () { $("div.slide div.handle").click(function () { if ($(this).parent("div.slide").hasClass("opened") && !$(this).parent("div.slide").hasClass("opened2")) { $(this).siblings().css({ "opacity": "1" }); var e = $(this).parent("div.slide"); var p = e.prevAll("div.slide.opened"); var ph = p.children("div.handle").children('.handle-arrow').children("img"); var pi = p.children("div.inside"); //e.children("div.inside").animate({"margin-left":"-883px"}, 1000); pi.animate({ "mar

Categories : Jquery

jQuery accordion content renders before accordion
This is refered to as the FOUC (Flash of Unstyled Content), and the only solution to my knowledge --when you are dealing with jQuery FOUC-- is to hide the element with CSS when it's not yet styled, and show it with jQuery when you think the flash has finished. Sometimes you don't see the FOUC, it's because your browsers grabs the JS files from the cache and styles everything very fast, there is no network delay. Similar situation

Categories : Jquery

Adding an accordion group to a Twitter Bootstrap accordion dynamically doesn't get recognized by the accordion
Bootstrap will automatically convert everything in the DOM at load time to the appropriate widget types, but it will not listen to new elements added to the DOM. For this, you'll need to manually specify the new row is collapsible after you add it. Fortunately, this should be pretty simple. Try appending .collapse() to the appendTo as shown: $(row).appendTo(claimedByMeAccordion).collapse(); See also the docs: http://twitter.github.io/bootstrap/javascript.html#collapse

Categories : Jquery

Can window.open open multiple tabs at once?
There's no concept of tab in standard DOM. In fact when you ask the browser to open a window it might be a tab, depending on the browser and user settings. So, apart writing extensions that the user will have to install, no, you can't do that.

Categories : Javascript

jQuery UI Tabs: Mismatching fragment identifier even with tabs defined
The problem is the target elements are not inside the tab element bill-selection-tab. Try <div class="bill-selection-tab"> <ul> <li class="tab active"> <div class="tab_left"></div> <div class="tab_right"></div> <div class="tab_proper"> <img alt="open-bills" src="images/open-bill-active.png"/> <a href="#open-tab">OPEN</a> </div> </li> <li class="tab"> <div class="tab_left"></div> <div class="tab_proper"> <img alt="settled-bills" src="images/settled-bill.png"/> <a href="#settled-tab">SETTLED</a> <

Categories : Jquery

Jquery Tabs reset the tabs after clicking a button inside Tab
Try this to set hash changes on URL when tab change and maintain hash on postback <script> $(function () { $( "#tabs" ).tabs(); // set hash on tab change $('#tabs ul li a').click(function () { location.hash = $(this).attr('href'); }); //maintain hash on post back $('#<%=Page.Form.ClientID%>').attr('onsubmit', 'this.action += top.location.hash'); }) </script> <div id="tabs"> <ul> <li><a href="#tabs-1">AFRICA</a></li> <li><a href="#tabs-2">EUROPE</a></li> <li><a href="#tabs-3">AMERICA</a></li> </ul> <div

Categories : Jquery

Need to add toggle effect to this: jQuery("ul.tabs-nav").tabs("> .pane");
I'm a bit of a beginner too, but I recently found how to do this. Add {show: { effect: "blind", duration: 1000 }, hide: { effect: "blind", duration: 1000 }} in your tabs() like so: $out =' <script type="text/javascript"> jQuery(document).ready(function($){ jQuery("ul.tabs-nav").tabs({show: { effect: "blind", duration: 1000 }, hide: { effect: "blind", duration: 1000 }) }); </script> <div class="post-tabs'.$type.'"> '.do_shortcode($content).' </div> '; return $out; I've excluded the "> .pane" because I don't know how to include it with proper syntax.

Categories : Jquery

Jquery tabs, how to indicate validation errors in other tabs when saving from another tab
Sharing an idea from my previous work in your case you might try to use wizard forms. Check this out Jquery Smart Wizard

Categories : Jquery

jquery-ui tabs callback not triggered when tabs are first initialized
It is because the first tab is not selected, it is activated as part of the widget initialization, which does not trigger the select event. One possible solution is to set the initialization value for oldTab as part of declaration. var oldTab; var newTab = mytabs.find('> ul a:first'); mytabs.tabs({ select: function(event, ui) { oldTab = newTab; newTab = $(ui.tab); if (oldTab){ console.log("do stuff with oldTab",oldTab.get()); } console.log("do stuff with newTab", newTab.get()); } }); Demo: Plunker

Categories : Jquery

How to make accordion stay open
Just add another class to the sections you want to be default open: <div class="accordion open"> Then change: $('.accordion').hide(); To: $('.accordion:not(.open)').hide();

Categories : Javascript

How to automatically open the first collapsibleset set(accordion)?
From the documentation You can use data-collapsed=false <div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false"> <h3>Section 1</h3> <p>I'm the collapsible set content for section 1.</p> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>I'm the collapsible set content for section 2.</p> </div> </div>

Categories : Jquery

jQuery ui tabs: all tabs show same content
Here a working Fiddle. Looks like you have missed the css file. I added the following css to fiddle. http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css

Categories : Jquery

jQuery UI Tabs with dropdown enabled tabs
for drop menus you can use css and simply jquery (.show) and (.hide). there will be some simple calculation and css positioning.Every tab container should have one your drop down menu list. once u hover the tab u can show the container ..if any lists presents under ur drop down lists u can show by another list which will be present at right side of drop down list which is selected in drop down.You can refer this link.. this idea make ur page looks good. http://foundation.zurb.com/page-templates4/grid.html

Categories : Jquery

open accordion when clicked on a separate image
you can trigger the event on your accordion when user click image on your page $("#accordianID").collapse('toggle'); OR $("#accordianID").collapse('show') by this way you can remotely change the state of accordion Ref:Bootstrap DOC

Categories : Jquery

Accordion to scroll to current open item
Use jQuery's position and scrollTop(): <script type="text/javascript"> $(function(){ $('.turn1').click(function(){ $("html, body").scrollTop($(this).position().top); }); }); </script>

Categories : Jquery

How to open/collapse GWT Bootstrap Accordion programmatically
Sure, take a look here: http://twitter.github.io/bootstrap/javascript.html#collapse $(".collapse").collapse(); For how to use that Javascript code in GWT, take a look at this question and the link to ScriptInjector mentioned in it.. Edit: Did some research, you should check your markup to make sure you're really using the collapsibles mentioned in that Twitter Bootstrap link above. If not, try the Collapse class.

Categories : Gwt

Accordion on page needs to have one of the boxes stay open and not be collapsable
I guess if you're sticking with jQuery UI, you could make it it's own non-collapsible accordion, click here to take a look (Note edited from my original answer to address your 200px height issue): <div id="tabs"> <ul> <li><a href="#tabs-1">1</a> </li> <li><a href="#tabs-2">2</a> </li> <li><a href="#tabs-3">3</a> </li> </ul> <div id="tabs-1"> <div class="accordion"> <div class="height_control"> <div class="sub_accordion"> <h3>Heading1</h3> <p>The content of heading1</p> <h3>Heading2</h3>

Categories : Javascript

Managing open and closed menus on custom accordion navigation
here's a way: $('.has-submenu > a').on('click', function (e) { e.preventDefault(); // slide up currently open except if click // occurs within an already open menu if ($(this).closest('.nav-open').length === 0) { $('.nav > .nav-open').removeClass('nav-open').find('> ul > li').slideUp(); } // give the <li> the "nav-open" class, then slide the <li> grandchildren $(this).parent().toggleClass('nav-open').find('> ul > li').slideToggle(); }); http://jsfiddle.net/JqJce/6/ I'm setting the nav-open class on the <li> parent of the <a> vs on the <a> itself Also updated this CSS: .nav-open > a:after { content:' - '; }

Categories : Jquery

Extjs accordion items how can i make an open item not to close again when clicking on it
What you want is that nothing happens when the user click on the currently expanded panel, instead of collapsing and expanding the next one, is that right? Unfortunately, there's no built-in option for that... If you really want it, you'll have to override Ext.layout.container.Accordion and implement it yourself. Edit In fact most of the collapsing/expanding code lies in the Ext.panel.Panel class. This simple override seems to be enough to do what you want. Apparently this method is used only for collapse listeners, so it shouldn't have any adverse effect (unless the method is also used somewhere in your code...). Ext.define('Ext.ux.Panel.JQueryStyleAccordion', { override: 'Ext.panel.Panel' ,toggleCollapse: function() { if (this.collapsed || this.floatedFromCollapse) {

Categories : Javascript

Open window with several tabs in it
You can not control the creation of the browser's tabs. You can only open new windows. The behavior of tabs and windows can be configured in each browser in a different way and there's no way to take control of it right now.

Categories : Javascript

.submit() open two tabs instead of one
try return false; end of click event to prevent submitting the form again $("#preview").click(function() { $("form").attr({action: "http://www.google.fr", target: "_blank"}).submit(); return false; });

Categories : Jquery

Open file with tabs
You have to add new TabPage to your TabControl before Loading file (the way in your code): TabPage tab = new TabPage(){Text = System.IO.Path.GetFileName(Chosen_File)}; tabControl1.TabPages.Add(tab); tabControl1.SelectedTab = tab; RichTextBox rich = new RichTextBox{Parent = tab, Dock = DockStyle.Fill}; rich.LoadFile(Chosen_File, RichTextBoxStreamType.PlainText);

Categories : C#

Tabs open according to links on sub menu
You can do this using Javascript. Just toggle property display of that class from none to block and vice versa. If you are using jQuery, you can do this: $(document).ready(function() { $('#cat_link').click(function() { $('#tabs-1').hide(); $('#tabs-2').show(); return false; }); $('#item_link').click(function() { $('#tabs-2').hide(); $('#tabs-1').show(); return false; }); }); You also have jQuery-UI widget tabs. If you are using pure javascript, you can do it like this (reference): function hideshow(which){ if (!document.getElementById) return if (which.style.visibility=="visible") which.style.display="hidden" else which.style.display="visible" }

Categories : HTML



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.