One Function To Toggle Multiple Divs?
Mar 30, 2011
I will have a page with about a 100 or so different links and I would like each one to toggle the visibility of its corresponding hidden div.For instance, if I have a county 'Johnson' when it's clicked I would like the hidden div associated with that county to become visible. I would like to do this without having to write a different function for each one. Is there a way to do this easily?
Below is a solution I was given elsewhere but I couldn't get it to work.Most ideal of all I would like it to work with an image map, with each county having it's own set of stats to be toggled in.
<!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 9 Replies
ADVERTISEMENT
Dec 18, 2011
I am trying to toggle multiple divs toggle open/closed show/hide with a slide left effect It works but is buggy if you click too fast [URL] I want to create this but control to content in the sliding divs [URL]
View 1 Replies
View Related
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
Oct 29, 2010
I am trying to make a multiple checkbox filter. It works by selecting/unselecting checkboxes the divs with classes revered to the checkboxes will activate deactivate.
This is the javascript I founded on the net:
Code:
<script type="text/javascript">
$(document).ready(function(){
$("#events li."+$("input.type_check").attr('id')).addClass('type_hidden');
$("#events li."+$("input.type_check").attr('id')).slideUp();
$("#events li."+$("input.start_check").attr('id')).addClass('type_hidden');
$("#events li."+$("input.start_check").attr('id')).slideUp();
$("#events li."+$("input.place_check").attr('id')).addClass('type_hidden');
$("#events li."+$("input.place_check").attr('id')).slideUp(); .....
To see it working online look here: [URl]
There two problems. I want to replace the sliding effect. I want to make a table with the divs in it. And when a div is deactivated the text or image shows grey and the link is disabled and when activated the text/image shows black/color and the link is enabled. So when you uncheck/check the boxes the divs will toggle between the two styles clickable and unclickable. I also want to make a second checkbox/radio row with different css styles to choose from. When a style is selected and you click on a link in div it will send you to the page with the selected style.
View 6 Replies
View Related
Dec 7, 2010
Complete JS first timer here, hope you all can understand my difficulties and stupidities without getting too frustrated. Trying to make a portfolio website as a Christmas gift. Anyway, I'm trying to build a menu that:
1. Expands/Retracts when clicking on other 'headers' in the Menu.
2. Allows for more than one object to be listed in each 'header'.
(Something similar to this [URl]... I've tried to hatch together several online solutions but I really have no idea what I'm doing, as you can see:
[Code]...
View 1 Replies
View Related
Aug 29, 2010
I'm trying to use the function once which is .load() and fetch my content from there,then after that I'd like to seperate the class's or div's I'll be using such as <div d="test1">This content will show in the external website</div>But I'm having trouble doing that, I've used multiple lines just to load the same page and take small bits of content out and it doesn't work well together as some load's results will be different compared to the others.Heres my code:
$('#". $Server['ServiceName'] ."').fadeOut('slow', function(){ $('#". $Server['ServiceName'] ."').load('./includes/serversinfo.php #servers #". $Server['ServiceName'] ."', function(){ $('#". $Server['ServiceName'] ."').fadeIn('slow'); }); });
[code]....
View 2 Replies
View Related
Oct 5, 2010
I'm trying to get something to work that sounds simple and it worked great until I had a second item to apply it to. This works fine, with one div. When you hover over the link with the class 1slide, it loads the div with the class panel1. The problem is I can't get it to work if I use a second function for .2slide to load the div .panel2.
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
});});
</script>
I've tried multiple variations, including 2 <script> tags with the classes swapped, and combining as shown below
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
});
jQuery(".2slide").hover(function(){
jQuery(".panel2").slideToggle("slow");
});
});
</script>
I think I'm combining these wrong but I've tried multiple different ways. They're classes now but were ID's, and that didn't work either. Figures, I was hesitant about posting hours ago because I knew it might be something simple.. I almost solved everything with this:
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
jQuery(".2slide").hover(function(){
jQuery(".panel2").slideToggle("slow");
jQuery(".3slide").hover(function(){
jQuery(".panel3").slideToggle("slow");
})})})})
</script>
All 4 div's .panel1, .panel2, .panel3 are set to display:none. The only issue now is panel3 is twitchy. I have a feeling it's yet again just a closing bracket issue. Am I writing this correctly? semi-colons anywhere, mess the entire thing up. I am using FireFox 3.5 for reference.
View 2 Replies
View Related
Oct 14, 2010
I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:
Code HTML4Strict:
<div class="tip">
<a href="#"></a>[code].....
View 2 Replies
View Related
Nov 7, 2006
I never have luck in toggling divs with javascript, to which I am new.
Not even with a single browser, let alone making it compatible with all
major browsers. Also, I lack experience with client side codes. Code:
View 1 Replies
View Related
Nov 23, 2011
I have,essentially, anunlimited number of containers with dynamic ids and a dynamic menu to load each containers content. I have done this fine with static id's but do not know where to go to use dynamic.
<div class="wrapper">
<div id="pf1_1">
My content for pf1_1 container goes here
</div>
<div id="pf1_2">
[Code].....
View 1 Replies
View Related
May 24, 2011
Completely new to jQuery but I am trying to implement a few pieces on my new website. At the moment I have three images in a row and I want to be able to click on any one of the images and use jQuery to populate a hidden div below the three images that contains more info and slide it out using the fold animation. I'd also like it if when a second image was clicked it closed the currently open div and opened the new one. I've seen tutorials that open the divs but can't find one that closes them again on opening a new one.
Can anyone point me to a tutorial that does this or suggest how it could be done?
View 2 Replies
View Related
May 21, 2010
I am new to Jquery and was wondering how it is possible to open one DIV while closing all other DIVs ( or maybe just the open ones) all with the same CLASS. I know that the accordion does just that but I ran in some other issues there, because I was not able to use another DIV to trigger the accordion.
Right now I am Using the Toggle, which obviously toggles all DIVs with the class .info
$(".project_btn").click(function(){
$(".info").slideToggle("slow");
$(this).toggleClass("active");
});
Anyways here is again my question: How is it possible to open one div after a click whilst the others with the same CLASS are being closed (if already open).
View 3 Replies
View Related
Feb 22, 2011
I'm extremely new to jquery and trying to write a toggle function without using the built-in functionality. From what I've read, this should be a fairly straightforward exerciseHowever, I'm running an issue. My code doesn't seem to do anything. Not clear to me why because nothing is erroring out? Here's what I've got:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // we will add our javascript code here
[code]....
View 1 Replies
View Related
Jul 28, 2010
I have 2 divs: <div id="box1></div> and <div id="box2></div> I also have one link to contoll them both. The effect I want to get is: when I click first time on my link box2 hides, when i click second time also box1 hides, when I click third time both divs should show. I manage to do that both divs hiding but later I can't get the show. Im trying sth like this:
$(document).ready(function() {
$('.slick-hide').click(function() {
$('#box2').hide('fast');
$('.slick-hide').click(function() {
$('#box1').hide('fast');
$(".slick-hide").removeClass("slick-hide").addClass("slick-show");
$('.slick-show').click(function() {
[Code]...
View 2 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
Feb 5, 2011
I have a script that will slide a div up from the bottom of the page. The toggle button for this div however is going to be right on top of the sliding div. But, when the button is pressed and the div starts to slide down, the script hides the button. Here's an example... [URL] How can I get the toggle button to slide with it, but not disappear?
View 7 Replies
View Related
Jul 20, 2010
Can JQuery toggle be use to switch divs on page load instead of having to click a button to start the action? What would I have to write in the header to make this happen if this is possible?
View 2 Replies
View Related
Sep 30, 2009
I am using a Toggle function right now that does a getElementByID check. I have a table dynamically being built by ColdFusion that shows a bunch of time entries for a support ticket. Each time entry has 3 rows that I only want to show if the first row is clicked. Right now it only displays the first of the three.
[Code]...
View 1 Replies
View Related
Mar 9, 2010
I have some jQuery code to add and remove a class to toggle an image. It works for one but now I want it to work if I add other checkboxes. Currently all the checkboxes change the 1st div. I would like to make it toggle it's respective div.
<html>
<head>
<title>jquery to Show/Hide a Div</title>
<script type="text/javascript" src="[URL]"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").removeAttr("checked");
$("input").click(function(){ .....
View 1 Replies
View Related
Mar 9, 2010
I have some jQuery code to add and remove a class to toggle an image. It works for one but now I want it to work if I add other checkboxes. Currently all the checkboxes change the 1st div. I would like to make it toggle it's respective div.
<html>
<head>
<title>jquery to Show/Hide a Div</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
[Code].....
View 2 Replies
View Related
May 12, 2010
Trying to get this to work individually with each individual instance on the page (usually 5-10 questions on each page)Right now it adds the class to every instance of the div that has the answerCorrect class. need the link to only turn on the specific answer associated with it.
<script type="text/javascript">
$(document).ready(function(){
$(".showAnswer").click(function(){
[code]....
View 3 Replies
View Related
Dec 29, 2009
I'm looking for a lightweight way to be able to switch between 2 divs on a page.
I have found various ways to do this online with jQuery, but none of which are able to handle multiple switches and make it extendable across the pages of my website efficiently.
For example I could have 12 - 15 individual elements on a page (All with same style) each with an option to switch content e.g. "Click here to do something" then once clicked "it would reveal something" (Within that element/<li> tag) - so it's element specific.
For example:
Code:
<ul>
<li class="box>
Title
[Code]....
But of course as it's element specific you have to associate each id together but you can't have two id="2" - as that won't validate.....
Looking around, a perfect example can be seen at: [URL]
And because it's CMS driven and will have multiple categories/pages, you can't list all the id's with the javascript, so it has to be portable/OOP (Is that the word?) so just a main identifier in the JS...??
Where you click to reveal code and it switches div, but only for that element, it doesn't effect anything else.
View 2 Replies
View Related
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
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
View Related
Mar 22, 2010
I have multiple parent sections on the page. Each section has 3 child sections. Each parent toggles open and closed. and within each section there are buttons to toggle the children open and closed.
In the case of both the parents and their children, when a parent is toggled open I want the other parents to toggle closed . The same applies to the children of each parent. I want to close all the other open children when a child is toggled open. Rather like some accordions - which I can not use for this function. This way there is only one parent and one child open at any time
Because of the number of parents and children on the page I can not use Ids. All are designated by classes
View 5 Replies
View Related
Dec 21, 2009
I have a form with 3 questions and 9 hidden option divs. Questions are answered in radio form and it will be mandatory to answer each question. Depending on which radio in each question is selected, several of the hidden divs will display, once the "Get options" button is selected. Now the code I have already works fine (only tested in IE8), however I'm almost 100% positive that the Options() function can be truncated considerably. In the final form, there will be 36 individual permutations of radios and as you can see with the little example below, the function will get quite large.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
[code]....
View 2 Replies
View Related
