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


ADVERTISEMENT

Show/hide Multiple Elements With One Link Using Javascript

Oct 14, 2005

How can i do this i already have a function to show/hide elements with one link but how can i show/hide multiple elements

Here is the script:

function obj_ref(object)
{
if (document.getElementById)
{
return document.getElementById(object);
}
else if (document.all)
{
return eval('document.all.' + object);
}
else
{
return false;
}
}

function obj_toggle(object, open_close, open_text, close_text)
{
var object = obj_ref(object);
var icone = obj_ref(open_close);

if( !object.style )
{
return false;
}

if( object.style.display == 'none' )
{
object.style.display = ''
icone.innerHTML = close_text;
}
else
{
object.style.display = 'none'
icone.innerHTML = open_text;
}
}

View 4 Replies View Related

Function To Hide/show Multiple Rows Of Table - Created Two Buttons With Different Background Flags

Jun 13, 2011

I have a table that contains many rows, some in italian with code <td nome='riga_i'> and some in english with code <td name='row_e'>. I have created two buttons with different background flags: italy and uk, so when one pushes the button with flag uk, the html page will be reloaded with only english rows, and when one pushes the button with flag it, the same page is reloaded containing only italian rows. All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this.

Here the code:

To better the code I have tried in this way but without success ...

View 1 Replies View Related

JQuery :: Multiple Forms With Multiple Submit Buttons?

Jul 7, 2011

I am trying to change each forms .submit function like so (below) but each submit button gets the function of the last iteration. I want each form to have a different submit function without using onclick events.

var x = document.getElementsByTagName("form");
for(i=0; i < x.length; i++){
var ele = x[i].elements;[code].....

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 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 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

Hide Multiple Elements By Name

Jul 20, 2005

I have a dynamically generated page (PHP), which contains an Explorer
like view of items. I would like to hide multiple <tr>'s by name, but
I can't figure out how thats done.

I have this code to hide one element by id

if (document.getElementById(id)){
document.getElementById(id).style.position = 'relative'
document.getElementById(id).style.display = 'none'
}

Anyone has a cod sample for looping through multiple elements and hide
them?

View 12 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

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

Multiple Submit Buttons Need Multiple Hidden Values?

Mar 19, 2009

I am setting up a text search with 3 search buttons to allow 3 different searches from the one text box. Each search has different values for the 2 hidden elements. So far I've got the 3 submit buttons working with the below code but I can't figure how to get the hidden values to be inserted. For each of the 3 different submits I need to tell javascript what the 2 hidden values are.

<SCRIPT language="JavaScript">
function OnSubmitForm()
{
if(document.pressed == 'questions')
{

[Code]....

View 4 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

Multiple Checkboxes To Hide/show Text?

Oct 31, 2011

im trying to do a single html page with multiple checkboxes to hide/show text when checked/unchecked. I'm really bad at html but so far I have got this: The problem I have is I dont know how to add more checkboxes.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>101st</title>

[Code]....

View 2 Replies View Related

Toggle (Show / Hide) Multiple Dynamic IDs?

Apr 3, 2010

Im trying to toggle a block of info on a forum that gets displayed multiple times. The below works for just one ID but I'll have more then one.

Code:
function toggle() {
var ele = document.getElementById("toggleUserinfo");
var text = document.getElementById("displayUserinfo");
if(ele.style.display == "block") {

[Code]..

View 5 Replies View Related

Multiple Hidden DIV - Show / Hide On Click

Nov 23, 2010

My goal is to be able to have a page with multiple hidden DIVs. On click of a link, a single DIV (box) should appear. Now, either on second click of that link, it should close OR on click of another link the first DIV should close and the second should open. At any one time, only one DIV (box) should be visible with the option to close DIVs by clicking a second time on the open link. I have only been able to get 2/3 the way there. I am able to click on a link and open it, click a second link which closes the first and opens the second, but I don't know how to close the last open link so that no DIVs are shown, as when the page originally loaded.

Here is my example code:
<html>
<head>
<title>Hide DIV Test Run</title>
<script language="javascript">
function show(selected) {
var openDiv = document.getElementsByTagName("div");
for(var x=0; x<openDiv.length; x++) {
name = openDiv[x].getAttribute("name");
if (name == 'openDiv') {
if (openDiv[x].id == selected) {
openDiv[x].style.display = 'block';
} else {
openDiv[x].style.display = 'none';
}}}}
</script>
<style>
body {
width:50%;
}
#openDiv1 {
display:none;
border:solid 2px black;
width:200px;
}
#openDiv2 {
display:none;
border:solid 2px black;
width:200px;
}
</style>
</head>
<body>
<div id="body">
<p>This is <a href="#" id="link1" onclick="show('openDiv1')">some</a> test text. Sentence #1.
<div name="openDiv" ID="openDiv1">This is the hidden text.</div>
<p>This is even <a href="#" id="link2" onclick="show('openDiv2')">more</a> text. Sentence #2
<div name="openDiv" ID="openDiv2">This is more hidden text.</div>
</div>
</body>
</html>

View 3 Replies View Related







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