|
JavaScript - Help With Jquery Show/hide Divs
Hello all, I'm still learning java. I have the concept of hide/show down, but want I want to do is when a div is shown, all the other divs are hidden, and when I click on another div to show, the other one hides, etc.
This is my code for jquery show/hide: Code: <script type="text/javascript">
$(document).ready(function(){
$('#{field_label}').hide();
$('input#show{field_label}').click(function(){
$('#{field_label}').show('fast');
});
$('input#close{field_label}').click(function(){
$('#{field_label}').hide('fast');
})
});
</script>
What do I need to add so that the previous DIV that was open, auto closes when a NEW DIV is enabled to show. Much appreciated Coders! Similar TutorialsHi Guys! I found one great solution for show/hide JQuery but i can't figure out how to make JS,css and html code all together, so please if anybody can make that code together for me and post me here! -Thanks in advance!!! here is code with example: http://jsfiddle.net/9XmVT/14/ hi! i am doing a site using jquery address deep linking and within the content i need to implement a show/hide div function but it doesn't seems to be working. jquery address source: http://www.asual.com/jquery/address/ demo: http://www.asual.com/jquery/address/...tabs/#Overview my show/hide div: <a href="javascript:toggle('clickHere','here' true)">click here</a> <div id="here" style="visibility:hidden; display:none">xxxx</div> function toggle(target,imgname, isOn){ window.onresize = null; obj=document.getElementById(target); obj2=document.getElementById(imgname); if(isOn){ obj.style.visibility='hidden'; obj.style.display='none'; obj2.style.visibility='visible'; obj2.style.display='inline'; } else{ obj.style.visibility='visible'; obj.style.display='inline'; obj2.style.visibility='hidden'; obj2.style.display='none'; } } * the same set of show/hide codes work when the site is not implemented with jquery address (deep linking) * so what could be the issue here? please help! Hi guys, another day, another problem I have a select: Code: <label for="tiers">Number of tiers</label> <select name="tiers" id="tiers" onchange="showtiers()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> So depending what the user will choose, I want to show below divs: Code: <div class="tier" id="tier_1" style="display:block">
<label for="tier1">Tier 1</label>
<select name="item" id="tier1" onchange="recalculate(this)">
<option value="0">Please choose1</option>
</select>
</div>
<div class="tier" id="tier_2" style="display:none">
<label for="tier2">Tier 2</label>
<select name="item" id="tier2" onchange="recalculate(this)">
<option value="0">Please choose2</option>
</select>
</div>
<div class="tier" id="tier_3" style="display:none">
<label for="tier3">Tier 3</label>
<select name="item" id="tier3" onchange="recalculate(this)">
<option value="0">Please choose3</option>
</select>
</div>
<div class="tier" id="tier_4" style="display:none">
<label for="tier4">Tier 4</label>
<select name="item" id="tier4" onchange="recalculate(this)">
<option value="0">Please choose4</option>
</select>
</div>
As you can see, on page load you can only see select/div nr 1, three others are hidden. How can I make that happen? I'm trying with below code placed in the head: Code: function showtiers() {
var dropdownIndex = document.getElementById('tiers').selectedIndex;
var dropdownValue = document.getElementById('tiers')[dropdownIndex].value;
if (dropdownValue == 2) {
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'none';
document.getElementById(tier_4).style.display = 'none';
}
if (dropdownValue == 3) {
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'none';
}
if (dropdownValue == 4) {
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'block';
}
}
If someone could point out what am I doing wrong I'd really appreciate it. I am trying to create a questionnaire that only reveals some of the questions when certain answers to previous questions are given. i.e. if the answer to question 1 is Yes, then question 2 appears under it. If the answer is No then question 3 appears instead. At the moment, however, is does nothing. I know the javascript I'm using should work, as I have used it on a website before, but not in this context. Can anyone see what I'm doing wrong? The javascript I have writen for this is: Code: <script>
function showdiv(name){
var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]");
if (obj.style.display=="none"){
obj.style.display="";
}else{
obj.style.display="none";
}
}
</script>
The CSS is: Code: #q1 {
}
#q2 {
display:none;
margin-top: 10px;
}
#q3 {
display:none;
margin-top: 10px;
}
and the HTML is: Code: <div id="main">
<div id="q1">
<p>This is question 1</p>
<input type=button value="No" onclick="showdiv('q2');"/>
<input type=button value="Yes" onclick="showdiv('q3');"/>
</div>
<div id="q2">
<p>This is question 2</p>
<input type=button value="Yes"/>
<input type=button value="No"/>
</div>
<div id="q3">
<p>This is question 3</p>
<input type=button value="Yes"/>
<input type=button value="No"/>
<input type=button value="Maybe"/>
</div>
</div>
Hi, I am new to javascript so any help would be much appreciated. 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"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> 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. Thanks, James I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing. this is my current javascript: var ie = (document.all) ? true : false; function hideID(objID){ var element = (ie) ? document.all(objID) : document.getElementById(objID); element.style.display="none" } function showID(objID){ var element = (ie) ? document.all(objID) : document.getElementById(objID); element.style.display="block" } And this is just one of the links: <li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li> And this is one of the back to top/next button codes: <a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a> <a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a> This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much. Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx I am using the following code to show / hide form elements within a div based upon the drop down choice. Does anyone know how this code can be amended to use multiple drop downs within one form? 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
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var selectMenu = document.getElementById("selectMenu");
for (var i=0; i<=selectMenu.options.length -1; i++)
{
hideDiv(selectMenu.options[i].value);
}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
</script>
</head>
<body onload="hideAllDivs();">
<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>
</select>
<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>
<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>
<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>
<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>
</body>
</html>
Thanks in advance! Trying to get the divs to switch style properties when selected form select menu. Any help would be great! Code: <script type="text/javascript">
function showstuff(element){
if(document.getElementById(element).style.display = 'block')
{
document.getElementById(have).style.visibility="block";
document.getElementById(look).style.visibility="none";
}
else if(document.getElementById(element).style.visibility = 'block')
{
document.getElementById(look).style.visibility="block";
document.getElementById(have).style.visibility="none";
}
}
</script>
<select name="type" onchange="showstuff(this.value);">
<option value="look">Look</option>
<option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>
I kinda new to Javascript, and can get by with most of the basic bits and bods I need to do the day to day work on websites, but I've come across something that is causing me some issues, I could use some help. The situation is, we have a webpage with 2 divs on it, one div has a javascript calculator and the other div sows the calculations in 2 separate tabs, the calc works and the tabs work no worries, the tabs are done in jquery. The issue I've got is I need to hide the 2nd div with the tabs in until the user has done the calculation, I had this working no problem, until we switched to using jquery for the tabs, using a simple Code: window.onload = hide;
function hide() {
document.getElementByID('tabs').style.display = 'none';
}
But now I don't know how or where to put this in the whole load of code for the jquery Code: <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tab_header li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tab_header li").click(function() {
$("ul.tab_header li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
Can anyone give me any guidance at all?? Cheers What I am trying to do is get a select box for possible options... Much like you see on facebook when you search for a friend. If you select one of the options an action happens and if you select outside of the box or tab else where it closes. I can seem to do one or the other but not both. The options are filled in via AJAX and JSON. Here is a sample of my code. Code: <script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
suggestions.hide();
// On the change of the id_location text search for matching results.
$('#text').keyup(function(){
// Get the value of the id location.
var text = $('#text').val();
// Trim any unnecessary white spaces.
text = jQuery.trim(text);
// Start guessing after the length of text if greater than one.
if (text.length > 1) {
// Create a query string for ajax.
var qry_str = '?suggestion=' + text;
// Send an ajax json request.
$.getJSON('http://example.com/page.html' + qry_str, function(data){
// Empty the suggestions box.
$('#suggestions').empty();
// Show the suggestions box.
$('#suggestions').show();
if (data.length > 1) {
// Start a list for the suggestion.
$('#suggestions').append('<ul class="suggestion_list"></ul>');
// Loop through all the results.
for (i = 1; i < data.length; i++) {
// Get the name.
$('#suggestions ul').append('<li id="suggestion_' + data[i].id + '" class="suggestion suggestions">' + data[i].name + '</li>');
}
// If an id selection was made then place its complete text in the box and its id in the id location box.
$('.suggestion').click(function(){
// Get the id from the substring of the html id.
var html_id = $(this).attr("id");
var id = html_id.substring(11);
// Get the name from the text.
var name = $(this).html();
// Alert just to test if you have the id.
alert(id);
// Set the value of the text box to the complete name.
$('#text').val(name);
// Hide and empty the suggestion box.
$('#suggestions').hide();
// Turn the focus back to the text.
$('#text').focus();
});
/* This is the part that messes up the suggestion click function if turned on. */
// Hide the box when focus is else where.
$('#container').focusout(function(){
alert('test');
// $('#suggestions').hide();
});
});
}
});
});
</script>
<div id="container">
<input type="text" id="text" name="text" value="">
<div id="suggestions">
<ul class="suggestion_list">
<li id="suggestion_1" class="suggestion">Option 1</li>
<li id="suggestion_2" class="suggestion">Option 2</li>
<li id="suggestion_3" class="suggestion">Option 3</li>
<li id="suggestion_4" class="suggestion">Option 4</li>
</ul>
</div>
</div>
The main thing is to make them click an option or hide the list if anything outside the container is clicked on or tabbed to. Is there any vent better than the focus out statement or be able to select all elements not in the container and set a focus() function on them (without having to individually name all the elements)? Thanks for any help. Hi everyone, was wondering if someone would be able to help me out, and correct this, or suggest an alternative. I have hidden divs, and I have achieved easily and simply this with the following, but on click I want the other divs to hide so that they all can't be displayed at once, at the moment they just stack up on top of each other. I'm trying to keep it as simple as possible as i'm much the novice Code: <script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
}
</script>
and then
<a href="#" onclick="showhide('divname'); return(false);">
Thanks in advance ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg)
{
var ele = document.getElementById('Module1');
var ele = document.getElementById('Module2');
var ele = document.getElementById('Module3');
var ele = document.getElementById('Module4');
if("module1" + "module2" + "module3" + "module4" <40)
{
div.id.Failed = "block";
div.Failed = "Failed";
}
else
{
div.style.Passed = "block";
div.Passed = "show";
}
}
HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div> Hello, I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management". Does anyone know how I resolve ?. The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link. ------------ Have placed code in attachment as too long for this section Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> I don't know a lot about Javascript... still learning.. I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code: Code:
<script type="text/javascript" >
function showSample() {
if (document.getElementById('input').value='SW001') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW002') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='block';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW003') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='block';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW004') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW005') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='block';
}
}
</script>
<style type="text/css">
<!--
#main {
width: 400px;
margin-right: auto;
margin-left: auto;
height: 125px;
}
#imageArea {
float: right;
width: 200px;
}
#formArea {
float: left;
width: 200px;
height: 125px;
}
.image {
height: 125px;
width: 125px;
margin-right: auto;
margin-left: auto;
display: none;
}
#SW001 {
background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="imageArea">
<div class="image" id="SW001"></div>
<div class="image" id="SW002"></div>
<div class="image" id="SW003"></div>
<div class="image" id="SW004"></div>
<div class="image" id="SW005"></div>
</div>
<div id="formArea">
<form action="" method="get">
<input type='text' name="input" id='input' />
<input name="" type="button" onclick="showSample(this.selectedIndex)"/>
</form>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome I have a script to show and hide various divs based on a function & var. The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want. here is the JS: Code: function sitesurveyswitch(emotion) {
var e = emotion;
document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
document.getElementById('FeedbackHate').style.display = 'none';
document.getElementById('FeedbackOk').style.display = 'none';
document.getElementById('FeedbackLove').style.display = 'none';
if (e == 'hate')
document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackHate').style.display = 'block';
if (e == 'ok')
document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackOk').style.display = 'block';
if (e == 'love')
document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackLove').style.display = 'block';
}
and here is the code related to this function: Code: <div id="siteSurveyBox">
<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
</div>
<div id="FeedbackHate" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackOk" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackLove" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
Code: <html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>
can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs |
|||||||