FAQ Database Discussion Community


Jquery simple accordian

javascript,jquery,accordion,jquery-accordion
I have simple Jquery accordian, but i have problem of changing header color when tab is opened Here is my code HTML <dl class="accordion-modal"> <dt><a href=""><header>FIRST</header></a></dt> <dd class="active-accordian">FIRST CONTENT</dd> <dt><a href=""><header>SECOND</header></a></dt> <dd>SECOND CONTENT</dd> </dl> JS (function($) { var allPanels = $('.accordion-modal > dd').hide(); $('.accordion-modal >...

How to load page with accordion open based on external link

jquery,accordion,external-links
I am working on a FAQ/Helpcenter page for my company. One of the last things we are trying to accomplish is a "top questions section" where users can just click on the question and it opens a link to the page the question is on and the accordion is open...

Accordion Simple Multiple jQuery

jquery,accordion
I have the following accordion at first sight works fine, but when you close or click on the titles (h3) all close and not to be pertener. It was a way to segregate each accordion that works independently of others. HTML: <div class="accordion"> <h3>Lorem 1</h3> <div>Text-1</div> <h3>Lorem 2</h3> <div>Text-2</div> <h3>Lorem...

REMOVE Accordion Panel using Jquery

jquery,html,accordion,jquery-accordion,removeclass
While searching, I can mostly find how to add a panel using Jquery Accordion and got that to work no problem. BUT, how do I remove the same panel that I added? I have this fiddle:http://jsfiddle.net/cof7ojky/12/ working which adds a panel to the according. BUT now I want to REMOVE...

Dynamic Accordion Menu

javascript,jquery,database,html5,accordion
I'm trying to create a dynamic accordion menu that pulls its selection from a database... Unfortunately all I'm getting is a list of the items, not in accordion format. Any ideas on what I need to fix? JSFiddle Ends up looking like this You guys can't access the database so...

Trouble completing this jQuery .slideUp code

jquery,accordion,jquery-accordion
Okay, first and foremost I'm a newbie to jQuery (my background is purely HTML5 / CSS3 and graphics). Anyways, I'm working on a jQuery menu (trying to learn at the same time) that opens and closes like an accordion. I've got the first part of the menu working. When someone...

multiple divs using for loop

javascript,jquery,accordion
I am trying to make more than one div using for loop, i have tried the code below but it doesn't work. I am using accordion menu, and i want to make each div using for loop <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Default functionality</title>...

Trying to limit data-toggle in Bootstrap Accordion to .one click event

javascript,jquery,html,twitter-bootstrap,accordion
Right now I have a Bootstrap Accordion set up so when a panel body is clicked it automatically closes that panel and opens the next. I would like to restrict this event to only occur once per page load. #Carriers is the first panel-body #Storage is the ID of the...

Nested accordions collapse on parent

jquery,accordion
I have a pretty simple accordion and want to nest other ones inside them. How ever when you click to open one of the nested ones, the parent accordion collapses on it. Here is the code: $(document).ready(function () { $('.accordion-title').click(function () { if ($(this).hasClass('active')) { $(this).removeClass('active').next('.accordion-content').slideUp(); } else { $('.accordion-title').removeClass('active');...

Append to vertical accordion on button click jquery

jquery,html5,accordion,jquery-accordion
I have a horizontal tabs, and inside that, I have a vertical tab functionality. In the vertical tab, I have provided a button called Add More like this: <button id="addMore" type="button">Add More</button> On click of the button, I want to append new tab to the previous one. click method on...

How to remove the number on the tab of an Accordion?

java,swing,user-interface,accordion
Accordion can be downloaded here - http://www.javaswingcomponents.com/product/accordion Here is a sample output of an accordion. I want to remove the numbers on the right side of the tab. How can I do it? Thanks! Here is the code of the sample: import java.awt.BorderLayout; import java.awt.Color; import java.awt.Container; import java.awt.GridLayout; import...

ENHANCING AN ACCORDION

jquery,accordion
I have an accordion which works great inside my page. When you clck on the title the hidden div displays and when you click on it again it hides again. I want to enhance this accordion by having an additional function to make the accordion ONLY display one item at...

auto closing li when cliclking another li in a jquery accordion

jquery,accordion
I am making this accordion which has ul li's inside li.I want to automatic close all open li's when click on a single li.So far i have done this.The problem with it that when i click one li ,i have to click it again to close it before opening another...

cant access form inside an accordion

angularjs,accordion
here's my code sample <html ng-app="helloApp"> <head> <title>HelloWorld</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script> <script src="js/ui-bootstrap-tpls-0.12.1.js"></script> <script src="js/example.js"></script> </head> <body > <div class="page-header"> <h1>Hello World Sample...

How to assign/remove a class to an accordion if called from a different page

javascript,jquery,accordion
I am an amateur in JavaScript, I have an accordion with two Divs and I want to display a specific Div (Active) if called from a specific position from another page, simple ID calling doesn't work. the code id given below $(document).ready(function(){ var address=window.location.href; if(address.value$=="#div2"){ $('div > #div1').removeClass('active'); $('div >...

angularjs accordion dynamically open close

angularjs,dynamic,accordion,close
I am fairly new to Angular js. I want to design a page with angular-bootstrap accordion. I am trying to achieve below functionality, but not sure how. My page has 4 accordion groups. Each group has couple fields. by default, the first accordion group is open only if the user...

Jquery accordion unknown content divs

jquery,accordion,jquery-accordion
Effectively I want to say: "Grab all content between each occurrence of this class and wrap it up as a section. I've got a standard implementation function hubTasks() { $("#Form_Form").accordion({ header: ".FormHeading", collapsible: true, active: false, autoHeight: false, autoActivate: true }); } But obviously only collects the first div under...

Accordion in Windows Forms DataGridView

c#,windows,forms,datagridview,accordion
I need to implement some kind of accordion effect in a Windows Form DataGridView. When the user selects a row, the row is expanded to display some more information and if possible some buttons or other controls. The problem is, I have absolutely no clue, how to do this. I...

JavaScript Accordion Menu with querySelectorAll()

javascript,toggle,accordion,custom-data-attribute,queryselectorall
I'm attempting to build an accordion menu using querySelectorAll() but unsure what the best method would be to check if the clicked list item's children (.toggleContent and .toggleIcon) belong to it's clicked parent toggle_li[i]. Correct me if I am wrong, but I assume that controlling this within the onclick function...

react-bootstrap Accordion not collapsing with map

twitter-bootstrap,accordion,panel,reactjs,react-bootstrap
I have an array of items I would like to create Panels out of which would eventually be inserted into the Accordion. In one file, I have: var items = this.state.contents.map(function(content, index) { return <Content {...content}, key={index}/> }; return ( <Accordion> {items} </Accordion> ); In another file called Content I...

pseudo class content not showing properly

html,css,html5,css3,accordion
Hi I've created a radio button accordion using css and html5, the problem I'm having is with the pseudo class for the section element it won't show it's content properly e.g content: '1' and content: '3' for their section panels. I've created a codepen could someone see if they can...

image with webKit transform appeat under the next div

jquery,css,image,accordion
I trying to resolve this issue shown in the image for clarification. I have a small thumbnail with webkit transform. when I hover, The size get bigger. Wehn I use accordion, part of the enlarged image appears under the accordion div. I tried z-index, but it did not work. I...

Accordion issue in Table - jquery

javascript,jquery,html,css,accordion
i am binding the data dynamically. but Accordion is not working properly. JSFiddle link http://jsfiddle.net/aff4vL5g/360/ please note: I cant change the HTML structure Current table Out put i needed first accordion on click should dispaly child elements Second accordion on click should dispaly child elements where i am doing wrong??...

AngularJS Accordian Tag not working

angularjs,netbeans,accordion
I am new to AngularJS and tried to learn the tutorial/code sample from the link below. http://angular-ui.github.io/bootstrap/ I downloaded the latest version of Angularjs script and the bootstrap as suggested on above link and placed the code something as below just to test it out in Netbeans. Also, the code...

Object values not persisting

angularjs,accordion,angular-ui-bootstrap
http://plnkr.co/edit/KEhcaEs2GptBlF60KAXi?p=preview I'm trying to create an accordion with multiple options in each group. Once a selection is made in a group the group below it is enabled and expanded to allow for the next selection. I got the UI to work, but when I store the selection it gets overridden...

Howcome my accordion is not collapsing? - identical one does work

angularjs,accordion
http://plnkr.co/edit/xUuZyQTES83yccFRcc4K?p=preview Check out my plunker that replicates my exact problem. I trimmed my code as much as I could. I've also skimmed my code as much as I can.. and unfortunately I have not been able to find what is so significantly different between the first set of accordions and...

Collapse accordion horizontally on large screens and vertically on small screens

css,twitter-bootstrap,accordion
On this Answer is a great solution for the horizontal collapse: Bootstrap 3.0 Collapse Horizontally But the layout I am working on has that accordion slide under the div to the left of it for responsive view which then looks visually bad. Is it possible to have the accordion change...

Multiple bootstrap accordions with collapse other when clicked on one accordion

javascript,jquery,twitter-bootstrap,accordion
I tried the following code and everything is fine except the FontAwesome icons. I tried to find some solution on Google, but I couldn't find the solution that I'm looking for. When I click on one of the accordion the other accordion should be collapsed and the current clicked accordion...

Linking to a DIV inside a Bootstrap 3 accordion from another page

javascript,html,twitter-bootstrap,accordion,collapse
I saw a fantastic-looking solution to a similar question over here, but for some reason I can't seem to get the same solution to work on my page. I'm trying to create a direct link to the section, but when I type in http://www.scicoll.org/events.html#DC-GRB it doesn't seem to work. I'm...

handle expand event of bootstrap accordion placed inside tabs

angularjs,twitter-bootstrap,accordion,angular-ui,angular-ui-bootstrap
I have placed accordion inside tabs using Angular Bootstrap but I am unable to handle the expand event of accordion pane. Here is the fiddle: http://jsfiddle.net/vruqw9s8/ $(function () { $('accordion').on('show.bs.collapse', function () { alert('accordion change'); }); }); ...

How do I split Angular UI Bootstrap accordions into multiple columns?

javascript,angularjs,accordion,angular-ui-bootstrap
I am trying to split accordion directives into multiple columns. This is what I have so far: <accordion> <accordion-group ng-repeat="d in dimensions" heading="{{d.name}}"> {{d.description}} </accordion-group> </accordion> Right now, it displays the accordions in a line straight down the page, like so: Acc1 Acc2 Acc3 Acc4 Acc5 Acc6 I would like...

Accordion Image Viewer… Swipe navigation on mobile?

jquery,css,mobile,accordion,swipe
I have an accordion image viewer visible here: http://jsfiddle.net/gvp8kkeh/1/ Here is the HTML: <div class="accordian"> <ul> <li class="item active"> <a href="#"> <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" /> </a> </li> <li class="item"> <a href="#"> <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" /> </a> </li> <li class="item"> <a href="#"> <img...

slideToggle and toggleClass not working together?

jquery,html,css,accordion,slidetoggle
I am trying to slideToggle and then afterwards toggleclass, but by adding the toggleclass the slideToggle does not 'slide' anyone know how i can fix this? fiddle and code below. $(function () { $(".expand").on("click", function () { $(this).next().slideToggle().toggleClass('slidein'); $expand = $(this).find(">:first-child"); if ($expand.text() == "\u25B6") { $expand.text("\u25BC"); } else {...

Accordion tabs closing on click

html,css3,sass,accordion
I have some pretty basic accordion tabs that open when clicked and close when you click another one. I want them to be able to close when you click on the tab that is open as well though. Does anyone know how to do this? .ac-container { // max-width: 400px;...

Unable to append FontAwesome icon dynamically inside jQuery UI button

jquery,jquery-ui,accordion
In my project, I have a jQuery UI accordian and few buttons in each section. On click of these buttons I am loading data via AJAX into another <div>. To show what menu inside accordian is active, I am planning to show the FontAwesome eye icon inside of the button...

React.js - how to create Accordeon (talking to siblings)

javascript,accordion,reactjs
I just started using react.js and i love the way components work. I created a Card component, which will add a css-class expanded on click. This works like a charm. Now I want all the other cards to loose there expanded property once another card is clicked. In jQuery i'd...

jQuery multi-level accordion menu

jquery,html,menu,accordion,jquery-accordion
I found some accordion menus online but either they did not support multiple levels, or the code was quite cryptic and I didn't want to use it. So I decided, that I want to write my own accordion menu, which supports an arbitrary number of sub-menus. Here is what I...

jQuery Accordion Menu With Enabled/Disabled Links

jquery,menu,accordion
I have an accordion-type menu which has gradually evolved and is now almost working as I want. It has three levels: country, region and province. My aim is that when you click on a country, it slides down to reveal the regions. Then once it has done that, clicking the...

jquery accordion menu animation transition

jquery,css,animation,slider,accordion
I am looking for a tutorial on how to reproduce an effect very similar to www.outdatedbrowser.com I really like the way it animates and navigates. Does anyone have any pointers. Much appreciated, Cheers, Greg....

How can I open one accordion-group when I click to close another accordion-group?

angularjs,accordion,angular-ui-bootstrap
Here is my accordion: <accordion class="m3Details"> <accordion-group is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> <accordion-heading><span class="noQuery">Building<span class="caret"></span></span></accordion-heading> <li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="!y.offsite" ><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px"...

Angularjs make invisible accordion if subelement are filtered

angularjs,filter,accordion,visibility,ng-repeat
i have created an accordion dynamically with angular. Code: <input type="text" class="form-control pull-left" ng-model="searchSingoloCampo.title"> <accordion-group ng-repeat="category in categories"> <li ng-repeat="resource in category.resources | filter:searchSingoloCampo"> </li> </accordion-group> The accordions is generated by a list , and inside each accordion there is a sublist of elements. I can filter the element inside...

Bootstrap 3 Collapse in other section one per time

jquery,twitter-bootstrap,accordion,collapse
I have put together a FAQ with categories. My idea is to use the function Collapse bootstrap to display each category and into the collapse see a acordion with questions and answers. It is structured in two columns on the left select the category and the right questions and answers....

Accordion Toggle Arrows

javascript,jquery,css,accordion,jquery-accordion
I'm trying to work out how I can reset my toggle arrows when opening another accordion panel when one is already open. I have managed to toggle it on the open and close of one panel - but leaving it open and opening another panel has me stumped.... View the...

Get Hiddenfield value inside Repeater in asp.net c#

c#,asp.net,accordion,repeater
I have a hiddenfield inside a repeater control and a button outside the repeaster control. below is the asp.code that i have. <asp:Repeater ID="rptAccordian" runat="server" OnItemDataBound="rptAccordian_ItemDataBound"> <ItemTemplate> <div class="s_panel"> <h1> <a href="#" data-content="Tool tip"><%# Eval("Name") %></a> </h1> <div> <p> <small><span style="font-family: 'Segoe UI'; font-weight: bold;">Category Objective: </span><span style="font-family: 'Segoe...

owlCarousel not calculating height in accordion on page resize

accordion,owl-carousel
I am using owlCarousel inside an accordion. Every thing is fine until i resize the window. After resizing if the accordion was already opened it looks perfect but if it was closed during resize the carousel height goes to 0. I have tried to use .refres() method of owl carousel...

Accordion in a column of ASP.net GridView

c#,jquery,asp.net,gridview,accordion
I have a requirement like, I need to put Accordion inside a Gridview column and whenever a user clicks on the accordion's header it should open and close. I have searched over the Google for solution but I couldn't find the actual solution instead everyone have explained about JQuery Accordion...

JavaFX TitledPane can't override -fx-text-fill

java,css,javafx,accordion,javafx-8
I'm trying to change the title color of my TitledPane when they are pressed, but I can't manage to do that. This is my css: .titled-pane * { -fx-background-color: transparent; } .titled-pane .title{ -fx-background-color: #666666; } .titled-pane .title:hover { -fx-background-color: #AAAAAA; } .titled-pane .title:pressed { -fx-background-color: #DDDDDD; -fx-text-fill: black; //...

Push down footer when opening accordion

jquery,html,css,accordion,jquery-accordion
I have an accordion as my nav that I have fixed on the page but when opening the accordion it overlaps my footer, I have looked around and people are having the same problem but I can't seem to get any of the solutions to work with mine. .servicesub {...

Using Accordions and Tabs

javascript,jquery,html,tabs,accordion
This question has been asked before but not solved. I'm using jquery Tabs and Accordion, both on the same page and they simple won't work together. They work seperate on individual pages, but as soon as theyre on the same page the tabs won't work. In fact, it flips randomly...

click only the header not its specified children

javascript,jquery,accordion,jquery-accordion
I have this html <div class="accordion_wrapper"> <div class="accordion_header"> <h1>Accordion Test</h1> <select> <option value="" selected disabled>Options</select> <option value="option 1">Option 1</option> <option value="option 2">Option 2</option> <option value="option 3">Option 3</option> </select> </div> <!-- end of accordion header --> <div class="accordion_content"> <p>this is the accordion content</p> </div>...

Remove border from Bootstrap accordion

html,css,twitter-bootstrap,border,accordion
I've been stuck on this (apparently easy) thing that I can't manage to solve. I'm using Bootstrap 3.2.0 and I'm not able to remove the line between the accordion panel title and the panel body while every other border and shadow is gone. I've already tried every suggestion that was...

Bootstrap hide image on accordion click

javascript,jquery,twitter-bootstrap,accordion
I want an image to show on the "next" accordion when the first is clicked. As the user clicks on each accordion that image hides and the next shows. I have had no luck with my script. <script> $(document).ready(function($) { $('#accordion').click(function(){ $(this).siblings().find('.Arrow').hide; $(this).find('.Arrow').show; return false; }); }); <div class="panel-group" id="accordion1">...

How to collapse/expand accordion in a Q&A form after input selection

javascript,jquery,twitter-bootstrap,accordion,collapse
Not sure if that's the correct vocabulary, but here's what I'm trying accomplish. I'm working with a team on this big multi-page Q&A application, my task is make one particular page use the least amount of screen real estate as possible. I'm using an accordion, each one has a question...

Navigating dom to adjust custom jQuery accordion

jquery,dom,accordion
I have the accordion working and it works really well as you go down the accordion, but as you come back up it's kinda glitchy. I want to make it so when you click on a masthead it will open the content within that masthead and anchor the top of...

angularjs nested accordion close-others not working

angularjs,twitter-bootstrap,nested,accordion
I have a multi-level accordion going in angularJS using the "accordion" and "accordion-group" tags. I'm using close-others="false" in the parent accordion, and close-others="true" in the nested accordion. Instead of the expected behavior where the outer panel allows for multiple groups to expand and the inner panel only allows one, what...

Collapse current div expand next div on button click

jquery,twitter-bootstrap,accordion,collapse,expand
I'm working on part of a large Q&A form, there is an accordion on one of the pages which you can view here. http://jsfiddle.net/Covanant/rxpdz2q9/ The way the form works is that when you answer a question in one accordion, it collapses then expands the next accordion, with the exception of...

jQuery Accordion doesn't load unless I refresh the page

jquery-ui,jquery-mobile,accordion
I am trying to use Accordion in my page, but it doesn't load unless I refresh the page. Here is the link: http://mzprojects.net/191stband/191stband.html click on the menu panel and click ensembles. The accordion does not work unless you refresh you page. Please look at the source code for the ensembles...

I need a reference for custom accordion view in android

android,view,accordion
I am working on a project which requires a custom accordion view in android. If anybody worked on such kind of requirement then please let me know. Thanks in advance.

Rotating arrow on accordion menu

css,rotation,accordion
Brand new here and a total novice, so please forgive me for the multiple faux pas I'm committing. I'm trying to make a widget for an iBook, that will have expandable information. Given that the space is limited, trying to use an accordion to do so. Through multiple iterations (some...

How to get element within accordion event in jQuery

javascript,jquery,accordion,jquery-ui-accordion
I am using the following script to detect click event so the accordion item expands and I need to get the div having class .cellArrow. Html <div class="cellArrow"></div> JS $("#accordionContainer").on("accordionbeforeactivate", function (event, ui) { var cellArrow = $(this).find(".cellArrow"); }; The problem is that each section of accordion has this class...

Can't get Zurb Foundation accordion to work

javascript,zurb-foundation,accordion
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page: <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link...

jquery slider with button between the content panels

jquery,toggle,accordion,slide
I'm having problems with a pretty simple task.. I want to be able to switch between two content panels, but with only ONE button. I have looked at jqueryUI accordion, but that has a header for every content panel. i want to have a kind of "button" BETWEEN the two...

Conflicting accordions.

jquery,accordion
I have two separate accordions that are are using similar jquery functions. One has nested accordions in it that need to expand and collapse when clicked, the other has just one accordion that needs to expand and collapse when clicked. The jquery code I have seems to conflicting with each...

Javafx accordion with transparent background?

background,javafx,accordion
Somehow accordion seems to behave differently than the other javafx elements, cause I cannot make its background transparent with CSS. I found a hint somewhere with this: .accordion.titled-pane > *.content { -fx-background-color: null; } But it didn't work. Maybe the syntax, I don't know, I tried without the > and...

Sliding accordion with pure JS and for loop

javascript,css,css3,accordion,native
I've written a for loop, which should run through all accordions and their children, but I can't figure out why it's only working on the first object. Fiddle Example for ( var i = 0, accordion = document.getElementsByClassName('accordion'); i < accordion.length; i++ ) { var accordion_section = accordion[i].children[i], accordion_key =...

Glitch with multiple accordions within tabs

javascript,jquery,accordion,jquery-ui-accordion
I have just looked through all similar posts on StackOverflow about this issue. Previously, these were working fine on this site because an ID was being used for every different accordion. The problem is we use this script across multiple sites and have 20+ scripts that are nearly identical with...