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]....
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>
I have 30 groups of checkboxes and want to validate that the user select at least one checkbox from any group meaning if he selected one checkbox from the first group and nothing from the other 29 the form should be valid. I tried different solutions but none worked.
View 1 Replies View Relatedadding 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.
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]....
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
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.
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]....
I am new to jquery and need some help with this I have the following simplified html
[Code]...
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 RelatedI'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).
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>
[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 RelatedI would like to have one questionare it consists of 5 questions and has got 5 options as an answer.Conditions are[B]1.All questions must be answered.2. If any question is not answered on submit i have to get error message "U have not answered All the questions."3. Kindly answer the question numbers 2,5 ( If question no 2 and questions no 5 is not answered.)[/B]For that i have created radio buttons group and wrote validation code.But its validating only one question not to rest of others questions.If some one misses any questions it is submitting answer
View 1 Replies View RelatedLet 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]...
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().
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:
Does someone knows how i can show/hide multible divs at one click?
View 2 Replies View RelatedOn 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]...
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]....
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.
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]....
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]..
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>
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]...
I am using the following code to show / hide form elements within a div based upon the drop down choice. How this code can be amended to use multiple drop downs within one form?
HTML Code:
<html><head>
<title>Show and Hide</title>
<script>
// Function that Shows an HTML element
function showDiv(divID){
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
// Function that Hides an HTML element
function hideDiv(divID){
var div = document.getElementById(divID);
div.style.display = "none"; // hide
} .....