Toggle Visibility On Multiple Elements Simultaneously?
May 14, 2009
I am working on a project that shows archived data as well as current data on the same page. When the page builds, current data is shown, archived data is hidden (by using a div with id="archive"). I found comments here that getElementsByName was not a good cross browser way to handle this (and I'm not sure how to use that anyway). Can someone suggest the correct way to handle this?
There should be a link that, when clicked, will grab each element on the page with id="archive" and toggle the display property (none or block).
Here is the current code:
function archives(toggle) {
if (typeof(toggle) != "undefined") {
if (document.getElementById(toggle).style.display == 'none') {
document.getElementById(toggle).style.display = 'block';
[Code].....
This works just fine, but only for the first element that it finds. I need many elements with the same name to be effected.
View 3 Replies
ADVERTISEMENT
Sep 12, 2011
I've got a list of links and divs. When I click on a link I want to keep showing all the divs which have a class that matches the clicked link id and hide all the divs which don't. At the same time I want to add another class (.item) to the matching divs and remove it from any div which is hidden.
When I run the code below, clicking any of the links hides all the divs apart from the one which doesn't have a matching colour class.
$('a.filterclick').click(function(){
var id = $(this).attr('id');
if($('.filterclass').hasClass(id)) {$('.filterclass').removeClass('filteredout').addClass('item');
}else
[Code]....
View 2 Replies
View Related
Dec 13, 2005
I'm trying to get multiple scripts to run simultaneously. As of now, my hover drop-down menu is not working on the "Teams" page, but all other scripts work. I have 3 other scripts running on the Teams page, and was wondering how I could get the menu to work as well (seeing how it's pretty important). Code:
View 4 Replies
View Related
Feb 16, 2011
I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this. how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled.
View 3 Replies
View Related
Oct 29, 2011
I've got a script that toggles the visibility of a div on "dashboard.html":
$(document).ready(function(){
$("#add_networks_wrapper, .remove_box").hide();
$(".toggle_add_networks").show();
$('.toggle_add_networks').click(function(){
$("#add_networks_wrapper, .remove_box").slideToggle();
});
});
On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it. What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.
View 1 Replies
View Related
Oct 29, 2011
I've got a script that toggles the visibility of a div on "dashboard.html":
On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it.
What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.
View 7 Replies
View Related
Feb 19, 2009
I'd like to be able to toggle the existence of a DIV using the onclick attribute.
HTML Code:
<input type="radio" value="1" checked="checked"
onclick="document.getElementById('div').style.visibility='hidden';"> 1
[code]....
View 2 Replies
View Related
Oct 29, 2011
I've got a script that toggles the visibility of a div on "dashboard.html":
Code:
On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it.
What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.
View 2 Replies
View Related
Jan 9, 2009
Was wondering how to accomplish this.I have several table rows that I would like to hide all with the push of a button.For instance:
Code:
<tr id="objects_row1"><table class="apples">
<tr id="apples_row1"><td>asdf</td></tr>
[code].....
View 4 Replies
View Related
May 3, 2009
I have just started trying to use jquery and though it looks cool and simple I'm having really problems working out how to do a really simple thingAll the examples I've seen use css selectors to target an element in the page but i need to use an id.basically I have a list of <a href> links and a load of <div>s that are all display:none by default when the page loads. The <a href> links and <div> elements are written dynamically by a php loop.What I would like to do is click on an <a href> link and make a specific <div> visible using its id. Sounds simple doesn't it ? But I can't figure out how to do this with jquery syntax.In traditional js syntax I would write a function that would receive the id of the target div as an argument when the <a> tag is clicked. Then I would loop through all the divs and make them all display:none and then display the target div.would i still need to put an onclick event in the <a href> links ? or is there a way of getting the id of the <a href> and using that to target the correct <div> ?
View 6 Replies
View Related
Sep 6, 2009
I found this little script and it works fine but the only thing is when the page first loads it displays the "This is foo" text. I would like it to not display the text until it is clicked. So instead of it displaying "This is foo" when the page loads I would like it to not display anything.
Here is the script:
Code:
<body>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>
</body>
View 9 Replies
View Related
Aug 12, 2011
I got the functionality of this plugin working tonight. It allows for a checkbox or link to make the password field of a form show the hidden characters, because sometimes it's nice to see them. I turned it into a plugin, and because I still consider myself a beginner with javascript, I thought I'd ask for a review so hopefully I can learn something. I tested it in FF5, IE7, IE8, IE9, Latest Opera, Latest Chrome, and Latest Safari.
Code JavaScript:
(function($){
$.fn.passwordToggle = function(options) {
/* Set defaults */
[Code]...
View 11 Replies
View Related
Mar 2, 2007
I've a frameset in my application.
1. A header Frame. (header)
2. A Tree Frame (left)
3. A Main Frame for displaying main contents. (mainFrame)
Well, I just want to toggle the visibility of the Left Tree frmae to provide more space to the Contents page when required.
> There can be a button which will have the label as HIDE when frame is visible.
> And when frame is hidden, the buttons label should be SHOW, clicking on which should show the frame baxck in its place.
View 3 Replies
View Related
Oct 29, 2011
I've got a script visibility of a div on "dashboard.html":
Code:
$(document).ready(function(){
$("#add_networks_wrapper, .remove_box").hide();
[code]....
View 1 Replies
View Related
Jan 9, 2010
I'm pretty new to JavaScript and I've been searching for a way to toggle the visibility of many divs with images inside. Basically I want to have nothing visible, then I have three links that represent three categories of the images. So for example if the user clicks the link "Illustration" I want all the divs with the class illustration to appear. But when the user chooses a new link say, "typography" I want to hide the divs with class illustration and then show the divs with class typography.
View 1 Replies
View Related
Jul 6, 2010
Look at my "Fiddle":[url]
I'm having problems with the jQuery 'if' statement. When the div 'accord3' is hidden, I'd like the class 'linklast' to be added to 'Schools' --> the bottom corners are rounded. When the div 'accord3' is visible, the bottom corners must be square, meaning the class 'linklast' has to be removed. This has to be able to switch back and forth while I toggle the visibility.
View 1 Replies
View Related
Dec 8, 2010
This is using jquery by the way. I have a list of ethnicity on a form for a person to enter that are checkboxes. One option is 'Other, specify'. When 'other specify' is checked, I would like a text box to pop up and disable the other boxes (if you pick other, you can't pick from the previous ethnicities). If 'other, specify' is unchecked, I would like for the text box to disappear and re-enable the checkboxes. I had the appearing box working just using JS. I can't seem to get the syntax right to use the toggle feature of jquery to make the box disappear when unclicked.
JQUERY
<script type="text/javascript">
$(function(){
$('#other').click(function(){
$('#otherrace').toggle(
function(event) {
$(event.target).css('visible');
},
function(event) {
$(event.target).css('hidden');
});});
</script>
HTML
<input type="checkbox" name="race" value="asian" />Asian<br />
<input type="checkbox" name="race" value="hawaii" />Native Hawaiian or other Pacific Islander<br />
<input type="checkbox" name="race" value="noanswer" />Choose not to answer<br />
<input type="checkbox" name="race" id="other"value="other" />Other, specify<br />
<div style="visibility:hidden" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>
View 3 Replies
View Related
Sep 15, 2011
I have a page where I have images that may have visibility 'hidden' or 'visible'.
So how do I ensure I animate (and other 'manipulations') only visible images when mouseover them and not the hidden image?
Must mention I want to do this without any use of css classes or other non-jquery made css.
View 2 Replies
View Related
Mar 5, 2008
I have a page with a number of divs on it. The number of actual divs is variable and is database dependent. Each div has a sequential id, e.g.:
<div id = "id0">
<div>
<div id = "id1">
[code]....
Initially the first div's visibility is set to "display: block" and all the rest to "display:none". What I would like to be able to do is present the user with a series of links which when clicked would result in just one of the divs being displayed and the rest all hidden.
View 14 Replies
View Related
Jul 2, 2009
Take a look at my testing website: [url]
You'll find the following javascript in the source code:
Now this all works...well, sorta.
The DIV elements specified are hidden when the page is first loaded.
These DIV elements then re-appear (as programmed above) when the mouse pointer is hovered over them.
These DIV elements are listed on the right-hand side of the test webiste.
They contain the Google Ad's you will see listed along the right-hand side of the website.
However, you were not suppose to see the Google Ad's when the website first loads up.
The DIV elements are initially hidden, but the Google Ad's contained in the DIV elements are always visible!
I want the Google Ad's to only appear if a mouse pointer happens to hover over them ( a little test of mine.)
I don't get it...the DIV elements disappears when appropriate, why not their contents: the Adsense?
View 3 Replies
View Related
Jul 23, 2005
I'm not sure if this is technically a javascript question, but I'm
coding in javascript, so I'll try here first.
To overlay a section of a page I typically use an absolute positioned
<div> and call insertAdjacentHTML. By raising the z-index higher than
than the underlying elements this method works fine, except if there is
a window'd element below it, such as a <select>. My understanding is
that I need to use the visbility attribute to hide the <select> before
calling insertAdjacentHTML.
Each <select> element (there are three) is identified with the ID
"select_vis". I am attempting to hide the select elements using the
following code:
selvis = document.getElementById('select_vis');
if (selvis) {
alert('gonna hide the selects.');
selvis.style.visibility = 'hidden'
}
document.body.insertAdjacentHTML('BeforeEnd', theHTML);
The code is being executed, however the three selects stay visible.
View 2 Replies
View Related
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
May 22, 2009
I have a multi select in a form and underneath this corresponding check boxes which are initally hidden.
What I wish to do is when the user selects or deselects an item in the multi select the corresponding check box is toggled to either show or hide.
I was imagining it would be something like this, I'm not sure what to put in place of the question marks. I've already tried click and select
$(document).ready(function() {
//Hide the checkboxes
$('#checkBox1').hide();
//When the user selects an option toggle the visibility of the checkbox
[Code].....
View 2 Replies
View Related
Mar 25, 2011
I have a single page which uses tabs to segment the content. Alongside the tabs themselves is a button for 'Help'. I'd like this button to open a different DIV depending upon the tab that is currently being used.For example, if I am on a tab for 'Ben', if I click the 'Help' button I want the 'helpBen' DIV to slideToggle.If I am on a tab for 'Paul', when I click the 'Help' button I want it to open the 'helpPaul' div.
Some extra needs:
1. switching to a different tab should close the currently open help div (e.g. helpBen or helpPaul)
2. There should only be one help div (e.g. helpBen or helpPaul) open at any one time.
I partly solved this with the following code but with erratic results and I'd like to know what I'm dong so wrong!Here is the HTML for the help button:
<a class="helpTrigger" href="#">Help</a>
The help DIV's are like this:
<div class="helpBen">help relevant to Ben section</div>
<div class="helpPaul">help relevant to Paul section</div>
The CSS for .help is display: none; by default so none are shown from the outset.
And here is the jQuery
$(".helpTrigger").click(function(){
if (location.hash == '#Ben') {[code].....
In the words of Dr Evil, "throw me a frikkin' bone here..."
View 6 Replies
View Related
Apr 28, 2009
[URL]
Click on any of them, and they open up just fine, however, after this point they dont close, and you also can't open any other one, it just... stays stuck there.
I had this working just fine, and in the process of working with wordpress and templating, obviously I changed something to mess it up.
View 5 Replies
View Related
Feb 20, 2009
I am creating a form to enable advertisers to create listings on an accommodation directory site.One of the form fields is a drop down with the following optionshotelguestHouseselfCateringinnholidayParkcampingThe top part of my form is the same for all these accommodation types. However I need to include a section specific to the accommodation type. This section will include groups of radio buttons and checkboxes allowing the advertiser to choose which facilities/amenities are available.For exampleA hotel may have 24 room service campsite may have a shop on siteI was planning to have a separate div for each of the accommodation specific sections and toggling the display based on the choice of the accommodation type from a drop down list.I have just had a horrible thought that it may be possible if javascript was not enabled that either none of the sections would be displayed or even worse all of them at once.
View 5 Replies
View Related
