JQuery :: Show/Hide Of Multiple Items At A Time With UL / LI / DL?

Dec 15, 2011

I have a UL group with multiple LI items, and each LI has a DL with a DT and DD inside. What I am trying to do is show EACH LI's DT, but not the DD. The DD will only show once the DT has been clicked (except for the first, which should be visible on page load.here is the structure code ... I am struggling to make this work using jQuery show/hide functionailty.

<!-- LIST -->
<ul class="examples">
<!-- ITEM #1 -->

[code]....

View 1 Replies


ADVERTISEMENT

JQuery :: Implement - Multiple Row Carousel - Display 9 Items At A Time On 2 Rows?

Aug 18, 2009

I'm wondering if there's a way to have multiple row carousel implemented.

I use jCarouselLite.. [url]

To be more specific, here's what I have:

And this is what I would like to accomplish:

I do realize that placing multiple items withing the <li></li> would be one approach, however I can't do that since the items are generated dynamically. The structure of my data (items) is an unordered list:

Using "float: left" & "clear: left" messes up the whole structure...

Any ideas how to display 9 items at a time on 2 rows?

View 2 Replies View Related

JQuery :: Multiple Image Buttons To Show / Hide Multiple Elements

Sep 27, 2010

I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?

The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>

View 6 Replies View Related

Jquery : Show / Hide Only One Div At Time

Jan 16, 2009

I have a page with 10 buttons, when the user presses a button it shows/hides the respective <div> containing the information. However if they show a div and try to show another before hiding the last one both of them are visible.Is there a way to iterate through all the div names and hide all off them and then show only the one that was selected?

View 10 Replies View Related

JQuery :: Hide/show Content One At A Time?

Nov 28, 2011

I am having some real trouble figuring out how I can hide and show divs one at a time, a bit like an accordian. Currently, I have several buttons, which open and close a div containing a ul menu. What I am trying to achieve is to only have one div showing at a time.

So for instance, when the page loads no divs are displayed, just the buttons. You click a button a div slides out. you click another button this div closes and another opens. I am new to jQuery, but working hard to understand and learn. So far I have the below for each button (div).

[Code]...

View 2 Replies View Related

JQuery :: Basic Show/Hide, But Only 1 Item At A Time?

May 18, 2009

I have a table of data, and I would like these options to show up when that <td> is hovered over, but as you can see this hides/shows every <td>.

$('div.msgEdit').hover(function() {
$('td .msgEdit a').show();
},

[code]....

View 2 Replies View Related

Dropdown Menu - Select Option To Show Multiple <div> Items?

Oct 10, 2011

I'm using a bit of Javascript to display content based on the dropdown selection:http://jsfiddle.net/mcgarriers/wjLXk/However, I would like it when the user selects "show two" that it shows the 2 div elements rather than specifically div2.And for "show three" it would show all 3 divs.

View 2 Replies View Related

JQuery :: Add Show And Hide Behaviour To Multiple Classes

Nov 9, 2010

adding my show and hide behavior across various classes, so the message shown will be unique to the class.

My J-Query looks like this;

<script type="text/javascript">
$(document).ready(function() {
$('#One').hide(); /
$('.col2').hover(

[Code]....

I have include a demo that should make it clearer, as to what I want to achieve. Ideally, each box will show a unique overlayed message as the user's mouse enters the box and hide once the mouse leaves.

View 2 Replies View Related

JQuery :: Show/Hide Divs For Multiple Selects?

Mar 25, 2011

I have a jquery function that will show or hide a div id="hide1" based on the result of a select id="ticket1"

$(document).ready(function(){
$('#hide1').hide();
$('#ticket1').change(function(){
if(this.value == 'adult'){$('#hide1').hide();}

[Code]....

It works well! But my script actually clones elements of the form so a user could be selecting adult or child for a number of tickets - ticket1,ticket2,ticket3....

How can I adapt that script so that it will show/hide for each ticket

View 4 Replies View Related

JQuery :: Show / Hide Multiple DIVs On Page?

Jul 11, 2011

I have a little issue with trying to hide / show multiple divs on my page. I am using a class name for the divs but the name is generated by a field have set in my database. So for example
<div class="General">Ttitle 1</div>
<div class="General">Ttitle 2</div>
<div class="General">Ttitle 3</div>
<!-- and my link is -->
<a href="#" class="toggle" title="General">Toggle 1</a>

And then say I have
<div class="Questions">Ttitle 1</div>
<div class="
Questions ">Ttitle 2</div>
<div class="
Questions ">Ttitle 3</div>
<!-- and my link is --><a href="#" class="toggle" title="
Questions ">Toggle 2</a>

What would be the easiest way or the best way to code out the jquery to hide / show all the divs with the same name as the links title i can do code jquery to toggle 1 div but not sure how to code it so that it will hide / show all the divs with the same class name.

View 5 Replies View Related

JQuery :: Show/hide Multiple Divs Independently?

Mar 28, 2010

Is there a way I can simplify my code below? I want to be able to have just one iteration of the code and have it automatically switch out the IDs without have to add a new bit of JavaScript with each new div that is added. Here's my Javascript:

$(document).ready(function() {
// toggles the personnel window on clicking the image/header
$('div.title'+'#one').click(function() {

[code]....

View 2 Replies View Related

JQuery :: Show Hide Multiple Divs Independently Without #ID?

Dec 5, 2009

I am new to jquery and need some help with this I have the following simplified html

[Code]...

View 2 Replies View Related

JQuery :: Show / Hide Single Div With Multiple Links

Mar 22, 2011

I am getting to know jquery a little, and I am trying hide and show a div when a link is clicked.I have a page setup that has a flash video in a div on the main page. Then when a link is clicked, a lightbox window opens and plays another video. I am trying to get the video on the main page to hide while the lightbox video is playing. Then when a user closes the lightbox window, the div with the main video on the page is shown and starts playing again.So far I can get this to work with one link. But I cannot get the main video div to hide when a second link is clicked.

View 1 Replies View Related

JQuery :: Using Show Hide Div Script For Multiple Div Groups?

Jul 3, 2010

I have a jquery script for showing and hiding the content inside, between two divs,controlled with radiobuttons. I like to use the same jquery script for another group of divs and radiobuttons so I'm trying to create a loop are so inside jQuery.

<!----------------- my script ---------------------->
showhide.js
jQuery(function() {

[code]....

View 9 Replies View Related

JQuery :: Hide / Show Multiple Divs From Anchor Tags?

May 3, 2011

I've got an issue with the attached file.

I have 3 buttons & 3 divs.

I would like to hide/show the relevant divs (into a container) based upon the button pressed. If no div was open, then it would simply open the relevant div, however if say div 2 was open and div 3 was pressed, div 2 would toggle closed then div 3 would toggle open.

I've got each individual div opening and closing, but I'm stuck at the next point (checking if a div is open/toggling etc).

View 5 Replies View Related

JQuery :: Show Hide Multiple Other HTML Input Fields

Mar 1, 2010

I am having some jQuery troubles whereby I have some jQuery that toggles an 'Other' HTML input field and associated label when a user selects the value Other from a HTML select drop down. I have this working for one field but the application I am building has increased in scope whereby there may be multiple instances of members on one page so the Other option will be there multiple times. At the moment if a user selects Other from one drop down all Other input fields show. How do I make this exclusive without repeating the jQuery for the separate instances?

// Show/Hide 'Other'
$(document).ready(function() {
$('.jOther').hide();
$('.jTitle').change(function() {
var $index = $('.jTitle').index(this);
alert($index);
if($('.jTitle').val() != 'Other') {
$('.jOther').hide();
} else {
$('.jOther').show();
window.location.hash = 'Other' + $index;
}});
});
<td>
<select id="title" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="other" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="other" id="other" maxlength="6" />
</td>

View 1 Replies View Related

JQuery :: Multiple Show And Hide Using MYSQL Fetch Array?

Feb 21, 2011

[code]My problem is simply that i have say 5 columns in the database placing the jquery script in that section allows that to be on each and every post. That works fine. the problem is though only the first one works the rest do not. It simply just doesn't have any action while the first one works fine.

View 1 Replies View Related

Why Hide / Show Requires Double Click First Time

Feb 14, 2011

I'm testing a page with a .js hide/show <div> overlay to hide/show a video player. The image of the video screen in the center of the page, when clicked, opens a hidden <div> overlay. It works but it requires the viewer to double click the first time. What needs to change to make it "show" the <div> on the first click? Once the video <div> is displayed, then it works every time with just one click to hide or show. It's just the first time that requires two clicks to get it to work. Here is the page: [URL]

Here is the code used to implement the hide show, in the <head>:

Code:
<!-- Elements Needed for Video Player Popup -->
<!-- The javascript hide/show -->
<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
} function ShowContent(d) {
document.getElementById(d).style.display = "block";
} function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
} //-->
</script>
a
And on the image, which acts as the button:
Code:
<a href="javascript:ReverseDisplay('mediaspace2')">
<img src="images/vid_button_image.jpg" width="376" height="282" border="0" /></a>

View 4 Replies View Related

Show / Hide Div Multiple Div's?

Jun 22, 2010

Let me start by saying I'm a noob to JavaScript. What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right.

[Code]...

View 2 Replies View Related

Show And Hide Multiple Divides At Once?

Sep 27, 2011

I have a page that has 26 divides one for each letter A-Z.

I have the script written so that when you click on the link for one letter it shows that divide and hides the rest. However, I think there has got to be an easier way to do this because the code is so long! It works great but takes forever to write! reduce the size of this code?

Javascript: (Short and simple code)
function showstuff(divID){
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
window.location.hash="names";

[Code]....

So I have 26 functions being called for each click! There must be a simpler way to do this. Perhaps I can write a function that calls all 25 hidestuff() functions and then I can add the one showstuf().

View 13 Replies View Related

Read The Value Parameter "codice" And Show / Hide Items In Relation To That Value?

Nov 30, 2010

I used the onchange event in select:

Code:
<select name="menu"
onchange="window.location.href='?codice='+this.options[this.selectedIndex].value;">

[code]....

View 24 Replies View Related

JQuery :: Toggle Function - Hide/show Table When Hide/show Button Is Pressed

Sep 12, 2011

I am trying to hide/show table when hide/show button is pressed

Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.

Code:

View 1 Replies View Related

Show & Hide Multiple Div Tags With One Click

May 28, 2006

Does someone knows how i can show/hide multible divs at one click?

View 2 Replies View Related

Show/Hide Toggle On Multiple Divs?

Oct 24, 2010

On the homepage of my site, I would like to have some nav links that toggle between a few divs that are below in the content The divs in the content should display one at a time. For example, if you click nav1, the user would see div1. If nav2 is then clicked, div1 would hide and div2 would display.

I have some code that will do this, but for some reason it is hiding any divs that are within the toggled div. I'm very basic with JS and could use some help here. Here is my code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
function toggleID(IDS) {
var area = document.getElementById('secondContent');
var sel = area.getElementsByTagName('div');

[Code]...

View 1 Replies View Related

Show And Hide Fails To Work Multiple?

Dec 5, 2010

So I am trying to hide content and show it when selected with a select box. The first select box works fine no problems.

However I added a second one with two options, and it will not work at all. If I use the same name it messes up, and if I make a new name, it does nothing at all.

ShowNext function is the new one I added that doesn't work.

<script type="text/javascript">
function ShowReg(op) {
document.getElementById('public').style.display='none';
document.getElementById('alliance').style.display='none';

[Code]....

View 13 Replies View Related

Script To Show & Hide Multiple Divs?

Jul 6, 2011

I found the following script online to show/hide a login div.

<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){

[Code]...

It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide.

I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy.

View 5 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved