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
ADVERTISEMENT
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
Jun 16, 2011
$('a.showContent').click(function(e) {
e.preventDefault();
$(this).each(function(i) {
$(this).parent().parent().find('.hide').slideDown();
[code]...
is also not doing it..how do I hide elements with same link that I used to show them?
View 4 Replies
View Related
Mar 14, 2010
I have a page I am working and I am having some trouble with: I need to show and hide areas based on a radio selection. I initally started using the show / hide feature in Jquery but the problem is the elements need to be removed but then put back if the user selects the radio buttonagain as it has form elements that have validaion on them. The validation is still trying to validate the form elements becuase they are still on the page but just not showing. This is the radio group the user makes the selection from:
<input name="terms_usr" type="radio" id="terms_usr_1" value="1"/>
<label for="terms_usr_1">Credit Card</label>
<input type="radio" name="terms_usr" id="terms_usr_2" value="2"/>
<label for="terms_usr_2">C.O.D</label>
[Code]....
View 3 Replies
View Related
Nov 4, 2006
I have some nested lists that I am trying to clean up. What I am wanting to do is to be able to click an item in the outermost list (the catagory), and have it show the appropriate inner list (the subcatagory). I have it working in FireFox, but IE is not working. Code:
View 2 Replies
View Related
Jun 11, 2005
I'm working on a form that hides/shows certain elements when certain things are selected.
In the file I'm working with, when you select the "problem" radio button, the "problem" drop down menu appears. When you select the "request" radio button, the "request" drop down menu appears
Now, when I try to make a selection from the "problem" drop down menu, nothing appears like it should (Computer, Monitor, Printer, and AVPeriph are the active ones). Everything stays hidden.
With each of those 4 selections, a table element should appear. Any ideas to what the problem is? I'm assuming it's the javascript since I don't know it too well.
View 8 Replies
View Related
Nov 5, 2010
I'm trying to figure out a small javascript question. I have certain elements in my pages that I want to show or hide if the user has javascript disabled. [code]...
View 1 Replies
View Related
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
Nov 6, 2007
I am trying to show/hide all the elements with a specific id ....
View 1 Replies
View Related
Jan 11, 2011
I have a page that is generated using php. Below, the pdf newsletter for each month is embedded directly into the page. What I want to do is have some javascript that when the link for a month is clicked, the embedded pdf expands below and when the user clicks on another month, that newsletter is hidden then the one they clicked on gets displayed; so only one newsletter is displayed at a time.
View 3 Replies
View Related
Mar 4, 2009
I am pretty new to JS but I've managed to create a function to show and hide a div according to a link's URL, but I am gonna have lots of url's and lots of div's to show and hide, its not a problem to show and hide them, the only trouble is that they stack, if I show div 1, and then press link 2 to show div 2, Div 2 is gonna be below div 1, and what I want is that when I click link 2 to hide div 1 or any other shown divs, I am sure its possible but i don't know how to do it. I think it would be possible by storing the id of the div in a variable, but the only problem is that when I call that function, the variable always changes so it would be a matter of storing the id in a variable outside the function, but i don't know how to do that, or what are the rules?
This is my code:
JS
function showHide(product) {
var el = document.getElementById(product);
el.className = (el.className == 'hide') ? '' : 'hide';
}
HTML
<div id="1" class="hide">Content of Div 1</div>
<div id="2" class="hide">Content of Div 2</div>
<a href="javascript:showHide('1');">Show Hide 1</a>
<a href="javascript:showHide('2');">Show Hide 1</a>
CSS
.hide {
display:none;
}
I need to have the javascript function call in href because of an applet I am using. In resume, the divs are hidden at the start, when I click one link, the div shows, when I click the other link I need the previous div shown to be hidden (class="hide"), and show the new div and so on.
View 4 Replies
View Related
May 5, 2010
oving jQuery at the moment, and have sort of hit a hiccup with showing and hiding specific elements with the same class. My idea is, what if I wanted to add a little button to show and hide the contents of a specific comment on a forum post, or blog, whatever. This would be easily done with id's but I'd like to just apply a class to each one of them and allow them to hide their contents. Here is the javascript and html as an example of what I am talking about.
[Code]...
View 2 Replies
View Related
Sep 9, 2010
i've got a question. I would like to show childlists in a sidebar which have less than 2 elements in it, and hide childlists which have more 4 elements in it.this is what i got til now:
$('.sf').children('li').children('ul').length <= '2'){
$('.sf').children('li').children('ul').show();
}
but with this code, all childlists will be shown.
View 2 Replies
View Related
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
Jun 29, 2006
just wondering, anybody has script/tutorial that does the show link after 45 seconds like rapidshare? There's a counter and after 45 seconds it displays the link.
View 1 Replies
View Related
Apr 13, 2009
I have multiple divs called article which have a show/hide link to toggle a div inside called articleBody. Problem is when I click the link all divs show/hide. The html structure is below:
<div class="article">
<p class="show"><a href="#">Hide [-]</a></p>
<div class="articleBody"><!-- Stuff i need to hide on click</div>
</div>
how I can toggle the text to say show/hide as well as just closing that one instance of div article rather than every instance on the page?
Thanks</textarea></p>
<input type='hidden' name='ID[4]' value='206852' />
<input type='hidden' name='URL[4]' value='http://forum.jquery.com/topic/direction-please-show-hide-from-single-link' />
<input type='hidden' name='CAT[4]' value='JQuery' />
[code]....
I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.
View 4 Replies
View Related
Sep 9, 2005
I'm doing a page w/lots of divs that I set to visibile or hidden dynamically using getElementById.. the divs are all forms... sometimes elements in a hidden form show thru on a visible form.. how can I fix this..
View 5 Replies
View Related
Aug 4, 2010
how one can show and hide a div element using a pulldown menu. i need the different selections in the pulldown menu to show hidden DIV elements on the page. this will be used in a system where i only have access to the template, so the only approach i can use is jquery. how to change it for the specific selectors i need.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[Code].....
View 2 Replies
View Related
May 27, 2009
I have been staring at this problem for too long and most likely missing a simple solution so I hope somebody can take my blindfold off and show me the way The markup (which comes from a CMS and I cannot change it) I am working with is akin to:
<div id="faq">
<p><strong class="open">FAQ 1</strong></p>
<p>FAQ 1 content lorem ipsem lorem ipsem ad infinitum</p>
[code]....
Notice how the second fo 3 FAQ sections has 2 paragraphs under the 'trigger' rather than 1? Therein lies my problem, because what I am doing with prototype.js is:
1.) Loop through page and collect all <p>'s
2.) do a .each iteration and attach an onclick event on $$('p strong.open') - assume this node for each iteration is now var 'trigger'
3.) run Element.hide() on trigger.next()
4.) in the onclick event, run Element.show() for trigger.next()
- If you are still following so far - my problem is that next() only shows/hides one single element and that is the <p> holding the content - which is fine except when there are 2 or even more <p>'s with content I need to act on. I;ve experimented with nextSiblings and adjacent() and I end up with too many nodes - basically every <p> in the entire document. I just want 'hide all P's after the trigger P up until the next p > strong.open
View 3 Replies
View Related
Nov 13, 2010
I've tried to find a stright forward script which show/hide specific form fields based on a selected option. I've seen many online but non of them was working with me without the need of some coding or tweeks. Does anyone here have such script?
View 4 Replies
View Related
Jan 26, 2009
I got a table.Each row has a list of statuses.If status == yes, then several elements will be shown in the rowif status != yes, then hide those elements.Im not sure if I have made a good solution, but it seem to work ok (opera9.6, ff2, ie7)The status selector passes on a unique rowid, and itself. This way the js function can get the row, and the status of the selection. Then toggle various elements in that row.Only annoying thing is the way row elements are named and found. It kinda have to rely on some hard coding, but its ok I guess.Im not sure if its possibel to just call toggle( this ), and that way get to the elements in the row.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[code].....
View 7 Replies
View Related
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
Feb 12, 2010
I have a table that contains information that is hidden within a 'td' element. Users can access this information if they wish by clicking on a link that is held in another 'td' element on the previous row (table structure below):
<table>
<tr>
<td><a href="#" class="install_toggle"
[code]....
View 1 Replies
View Related
Jan 11, 2010
I can I take a code like this:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
[Code]....
But make it so you see "Show" before you click, then change the text to "Hide" once you click the link?
View 12 Replies
View Related
Sep 1, 2011
There are various widgets and plugins that show link preview via tooltip or iframe,So as I am trying to continuously improve web sites experience with new trends and web functionalities - thus it come the task for uniform link preview via div and iframe.
View 14 Replies
View Related
Jan 1, 2011
I'm basically trying to make it so a link click will hide and display a series of DIVs to make my site look a bit neater and more professional. The code I have WORKS, it can make a DIV appear and disappear easily enough but the issue I'm having is that it only works if you click the same link to show nad hide. Click a link to show a DIV then click another link and both will be visible.
But the only other code I tried to hide all but the selected DIV just results in my page becoming invisible (Its constructed with DIVs from top to bottom) so its not a suitable result. I'm basically after this: [URL]. Where you click on the link (in this case an image) and it shows what you need. I did try searching through their HTML and code but their javascript file appears as one long string to me so its hard to find any real useful detail.
This is the code I have at the moment:
Code JavaScript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'block') {
document.getElementById(shID).style.display = 'block';
}else {
document.getElementById(shID).style.display = 'none';
}}}
And this is my current page in practice. [URL]. I'm assuming I might need an array but I need to stop it picking on every DIV and only the DIVs in my content area.
View 6 Replies
View Related