JQuery :: Accordion List - How To Make Only Section 2 Visible
Jun 11, 2009
I have an accordion list much like the example here : [URL]. Say for instance I have page links under the heading 'Section 2' of that demo above. How can I make it so that when you visit a page from these links 'Section 2' is visible and 'section 1' and 'section 3' are closed?
At the moment I have :
$(document).ready(function(){
$("#accordion").accordion({
active: false,
collapsible: true
});
});
<!-- start accordian menu -->
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div><ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul></div>
<h3><a href="#">Section 2</a></h3>
<div><ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul></div>
<h3><a href="#">Section 3</a></h3>
<div><ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul></div>
<!-- end accordion menu -->
</div>
What I need to add to make 'Section 2" visible only?
View 3 Replies
ADVERTISEMENT
Jul 13, 2009
In the below code, the ajax-loader disappears before the html returned by .load is actually visible in the browser. How can I correct it?
[Code]...
View 1 Replies
View Related
Jul 30, 2010
Not sure if this is the most appropriate forum, but I'm a jQuery newbie, so figured I'd start here. I put an accordion control on a web form, which seems to be working great!
[Code]...
The users tend to tab through the form. But when they tab to the end of an accordion section, the focus goes back to the top of the page. Is it possible to go straight to the next section of the accordion?
View 2 Replies
View Related
Oct 5, 2010
Is there any way to popup a javascript confirmation on clicking an accordion header to confirm the change of section?
View 3 Replies
View Related
Sep 11, 2011
I want to bind a click event to a selector which when clicked will open up a given part within an accordion. In the example below I want a link with an id of show-part1 to open up the first section of an accordion. My accordion has four sections. Consequently there are four 'accordion_trigger_index' classes with an index value from 0 to 3.
The code below triggers but it just kicks me to the top of the page and then back again, as if the $('.accordion_trigger_index').click(function(){}); is firing albeit not interpreting the index value.
The accordion works fine when clicked on directly. The error must concerning forced a click event while passing the index of which accordion_trigger_index class I want it to trigger (open).
Code JavaScript:
<script>
$('#show-part1').bind('click', function() {
$('.accordion_trigger_index').trigger('click').index(0);
[Code]....
View 3 Replies
View Related
Aug 9, 2011
I've been searching for a tutorial or example of an accordion or collapsible divwhere the height of the div/section is fixed and the content of the div is scrollable. Can someone please point me to a tutorial or code snippets that illustrate this
View 3 Replies
View Related
Dec 14, 2009
I will keep it simple. I need to list id of every element in given section. Example
<div id="leftSide">
<ul id="leftList">
<li id="item1"item 1</li>
<li id="item2"item 2</li>
<li id="item3"item 3</li>
<li id="item4"item 4</li>
[Code]...
I need to get IDs for "li" items on the "rightSide" container. How to?
View 3 Replies
View Related
Sep 1, 2011
I needed a sidebar menu that, when a user clicks the <h3>, a submenu expands. When the user then clicks on a different menu item, the previous submenu disappears meaning only one submenu can be visible at one time.
Now the code I have at the moment (from jQuery forums) works. It now needs a bit more refining so that it works the way I intend.
When you first load the page, all of the submenus are collapsed which is a real pain as each submenu has 20 - 30 selections.
Is there a way to have them all hidden initially?
Is there a way to get an open submenu to close by clicking on the H3 title again?
Since the site is local only, I posted up a sample on my JSfiddle account.
[url]
This one, which I also found on google, did what I wanted, but without the smooth slide animation. - [url]
When you then click on one of the H3's, it kicks into action and works great!
View 2 Replies
View Related
Jul 15, 2010
I am trying to figure out a way to tell if in a situation like
<ul id="ul1" style="overflow: hidden;width: 200px;">
<li style="float:left">one</li>
<li style="float:left">two</li>
[code].....
View 3 Replies
View Related
Jul 17, 2011
I've created a accordion with a unorderd list. You cann see this effect on jsfiddle.Unfortunately there are problems with more than one level. A click in this case hide the parent and next click is needed.
View 2 Replies
View Related
Nov 11, 2011
I'm using the jquery accordion in order to list all email received/sent. The header (h3+a) shows the object, the content (div) is the mail text.
HTML accordion :
<div id="accordion"><div>
<h3><a href="#">object 1</a></h3>
<div>mail 1 text</div>
</div><div>
<h3><a href="#">object 2</a></h3>
<div>mail 2 text</div>
</div>
<div>
<h3><a href="#">object 3</a></h3>
<div>mail 3 text</div>
</div>
</div>
Accordion script function:
$(function() {
$( "#accordion" ).accordion({
autoHeight: false,
header: "h3",
navigation: true
});
});
I would like to request my SQL database only when i clic on the header of a mail, and avoid to preload all the mails. The other problem, much important in my case, is to mark the mail "read" or "unread". There is a column in the SQL database for this. So, the mail needs to change to "read" state when I click on his accordion's header. Before using accordion, I was using simple link which reloads all the page. I've no problem with PHP/SQL, but I'm not so good in javascript/jquery, or ajax...
SQL request (simplified) :
$sql = "SELECT mail_object, mail_text FROM table_mail ";
$req = mysql_query($sql);
SQL update read-state (simplified) :
$sql_2 = "UPDATE table_mail SET mail_read=1 ";
$req_2 = mysql_query($sql_2);
So, is there any way to execute this code when I click on a header? After that, I'll asking you how to change header style to differentiate read/unread mail (in bold for example, or change background image/color).
View 1 Replies
View Related
Feb 14, 2011
Just started with JQuery and I need to make a hidden object be visible after 20 seconds.
I got this so far to make it invisible:
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">< /script>
<script>
$(document).ready(function() {
[Code]......
View 1 Replies
View Related
Mar 10, 2011
I have an image that I set to have a width of 100%. I want its height to be no greater than the visible height of the browser web-page area. This could distort the image, but thats OK. To makes things difficult, the image is in a div, and I want the div to be higher than the visible area. So I can't just set the div to height of 100%, and then within that set the image to a height of 100%. I know there is a javascript way of getting the height of the entire screen (screen.height) but that includes the extra areas of the browser such as toolbars etc. I know there is a 'offsetHeight' attribute, but I think I would have to use that on the BODY tag, and the BODY of the page could be several screens in height. So is there a solution to this? If there isn't then can I detect the aspect ratio of the screen?
View 3 Replies
View Related
May 26, 2009
I am having a simple textbox:
<input id="myText" name="myText" type="text" visible="false" />
and a checkbox:
<input name="myCheckbox" id="myCheckbox" type="checkbox" />
How can I make the textbox visible if the user select the checkbox?
View 2 Replies
View Related
Oct 31, 2011
How to make an image map link to another page AND open a specific accordion section?I guess I need a script that knows which area of the image map was clicked and not only navigate to page 2 but opens the section via slide toggle I need it too.Here is the the page with the image map (although image map version not upload yet so I have what will be uploaded below)[URL] ...and the page I need to navigate to based on the area of the image map clicked and also slidetoggling the div I need it [URL] Here is the image map:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<img src="/Img/Illustrations/kicktalkv2.jpg"" alt="Kick Talk" usemap="#kicktalk_map" />
[code]....
View 2 Replies
View Related
Jun 25, 2009
I would like to ask what must i change and in which file / line so i can have instead of on hover and closing automatically the ability to expand by myself and close myself the menu with accordion list choise...the site preview is: [url]
View 5 Replies
View Related
Aug 3, 2011
I want only the Text to be clickable in the accordion-header. I thought the header option is the right way to do so, but it doesn't work. Instead of h3 i want only the link to be clickable:
$(function() {
$( "#accordion" ).accordion({header:'a'});
});
<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>
View 1 Replies
View Related
Sep 12, 2011
i downloaded a Facebook Page template recently. the template works great, but i wanted to add one thing.here is the demo of the code:
http:[url]....
here is where you can download the template: http:[url]....anyhow, the part i want to change is the link that directs it to the content. for example, when you scroll over About Us, the little pop up from the bottom comes out. when you click it, it takes you to the About Us content. what i wanted to do, is make it so that when you click the whole jpg, it can take you to the content also. i noticed that the small link that pops up is too tiny and people get confused on where to click.
View 4 Replies
View Related
Apr 27, 2010
I have a div tag element and a hide/show button above it. I'm able to handle the hide show of the contents all right via the button, but I want the div to be hidden when someone clicks anywhere else in the document, save inside the div area itself.This functionality is similar to what you see on the sign on panel in twitter.com. Press the sign in, the div sign in panel displays. Press the sign in link OR anywhere else on the document outside the panel. The panel is hidden.What's the best way to script this functionality in jquery?
View 1 Replies
View Related
Oct 30, 2010
I understand how to make a div (table) invisible and then visible on a timer.. What I want to do is add a counter to my code and make the table flash 3 times and then stop with the table visible. all my code does right now is make the table flash on and off every 1 second. This is what I have right now:
<script language="javascript" type="text/javascript">
function magic() {
var d = document.getElementById('MagicTable');
if (d.style.display == "none")
d.style.display = "block";
[Code]...
View 2 Replies
View Related
Aug 23, 2010
I have a code below my concern being tht when the first text box "Name" conatins a value of "TPU" then the sexong text box "Ref Number" should be visible else should not be visible.
I mean the Whole <tr> shall be visible only if "Name = TPU"
Code:
View 1 Replies
View Related
Sep 2, 2009
is it possible to limit the number of visible items in a dropdown list using javascript or any other way?
View 1 Replies
View Related
Sep 8, 2010
Have table with 5 rows. First 2 rows visible. Last 3 rows hidden -
With onclick would like to make those rows visible to user - how can I do that?
View 6 Replies
View Related
Apr 8, 2010
How does one make a DIV visible if a form action is taken, such as a Radio button selected?
But here is the thing: this DIV that is to become visible and invisible upon radio clicked does not contain a simple short Text message, but instead this DIV contains many Images for selection. I mean I know how to turn on/off a DIV via Javascript command:
Code JavaScript:
But again this DIV is to contain many images and the inputs for selecting one of these images so that Javascript command will just not cut it.
View 1 Replies
View Related
Jan 20, 2011
I am trying to make a DIV visible after a user clicks a form submit button that posts to the same page.
Here is the code that I have came up with so far and it does not work.
<script>
void processForm()
{
document.getElementById("loadingImg").style.visibility = "visible";
[Code]....
View 2 Replies
View Related
Mar 27, 2010
Actually FF 3.6 does make it visible (if by default) but earlier versions (2) and Mozilla don't seem to. the code - this is the invokation function, the findObj is to set all lists to item 1 and can be ignored in the context of the question.
[Code]...
View 2 Replies
View Related