Link Click To Hide / Show Series Of DIV

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


ADVERTISEMENT

JQuery :: Show Hide 'td' On Click Of A Link?

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

Go To Next Page - Load The First Page Of A Series Of Pages Into An Iframe When You Click A Link

Aug 15, 2006

1. Load the first page of a series of pages into an iframe when you click a link
2. On each click load the next in order page
3. When last page has loaded if clicked again will start from the beginning.

What I am doing: I am creating a tutorial for a friend who cannot figure out how to use her new rental management program. I could use a manual slide show to have her click for the next image however, there are a LOT of tutorial images which show her what to do at that point. Her program contains a great number of setup screens, report screens etc. This means the slide show would be sitting there loading all these images before it will work. So, I figured, OK make a page with an iframe, and then I could put each image on it's own little page i.e. page1, page2 etc. Place a little button, or a next link, then have the link load the pages into the iframe in order.

View 5 Replies View Related

Hide/Show Div - On First Click It Detects That Div Is Hidden And Makes It Visible - Button On Second Click It Does Nothing

Mar 8, 2010

What I've doing wrong, on first click it detects that the div is hidden and makes it visible, button on second click it does nothing:

View 1 Replies View Related

Show / Hide DIV According To Link URL

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

Hide A Link After Click?

Jul 21, 2010

I am programming a website. On there website the users will be able to click "Add as friend". I am basically wanting it so that when my users click "Add as friend" the link will dis-appear and then it will visit a page on the iframe that I have already coded with a variable (addfriend.php?pid=CODEHERE).

If there is anyone that knows how I can make the code dis-appear using Ajax.

View 2 Replies View Related

Hide Link On Click ?

Aug 12, 2011

I have a link, and a onClick event, which calls jscript function.

Everything is okay, but how can i for example hide that link on click ?

I mean, i can do onClick = "this.hide()" or link.observe('click', function() { ... I can acomplish it this way, but can i do it with a function ?

Because, on click,a function does ajax reuqests, and i want that function to hide the link, not with inline code, or with some observe actions..and after that request, i want to hide the link.

View 3 Replies View Related

Hide/show Link Like Rapidshare

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

JQuery :: Show / Hide Link Div?

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

JQuery :: Show / Hide DIV On Click?

May 14, 2011

I want to have a couple of links like

'Link1' >> opens box1
'Link2' >> opens box2
'Link3' >> opens box3

The boxes are not closing good?

I have this code but something is going wrong:

<!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 1 Replies View Related

Show / Hide Table With A Click?

Nov 19, 2010

I want to hide a table when user click on a link

this is my code looks like code...

is it possible to hide above table at same time print this link clicked?

View 2 Replies View Related

JQuery :: Hide And Show Elements With Same Link?

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

Show/Hide Link PLUS Text Change?

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

Link Preview Show / Hide Div / Iframe

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

Show & Hide Multiple Div Tags With One Click

May 28, 2006

Does someone knows how i can show/hide multible divs at one click?

View 2 Replies View Related

JQuery :: Show/hide With A Single Click

Sep 14, 2010

The following code is a typical show/hide combo, followed by an attempt to do the same with a single control ("singleClick").

Unfortunately, it opens the "extra" dive but won't close it.

Is it a fault in my javascript, or am I asking the jQuery to use logic incorrectly?

This is the code:

View 1 Replies View Related

JQuery :: Show Hide Div On Asp:button Click?

Jul 18, 2010

I want to show hide a div and its content when show or hide button is pressed. How i can do it. it is a asp.net button and i also don't want the page to postback when button is clicked.

View 1 Replies View Related

JQuery :: Show Hide Subrow Using One Click?

Dec 21, 2010

I managed to write show hide sub row for my table.the first row of my table is master and the immediate next row is detail , I am hiding all detail rows initially. and when user click on any tr the next row which is hidden is made visible .

here is the script

$(document).ready(function(){
$("#report tr").live('click',function (event) {
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});


Now I want to show/hide all detail tr with one click

View 2 Replies View Related

JQuery :: Show/Hide Without The Click Function?

Aug 1, 2011

I am trying to create a simple splash page.

I have 2 divs on the page, div1 has a gif animation in it and div2 is the page content. I want to hide div2 and only show div1 which plays the gif, then after some time div1 fades away and div2 fades up to show the page content.

This is my thought process:

1) On doc ready, hide div2
2) after 3000 fade div1 out
3) fade div2 in

$(document).ready (function(){
$('#div2')hide();

but I dont know how to fade out the div after a time and fade in the other div.

The examples I see all use the click function.

View 1 Replies View Related

Show/hide Data On Label Click?

Feb 27, 2009

I am creating a static(only raw data) web site and want to show a panel as following.

Contact us panel

label1
Label2
Label3

when label1 click it would show as below

Label1-> on click Label 1
Label 1 details
abc location bla bla

how i can achive funtionality to click on label 1 and show details data and again clicking hides label1 data I am using page breeze html editior, Is it possible i can use java script functions in it,

View 2 Replies View Related

Firefox - Show When You Type In The Box, And Hide When You Click Away From The Box?

Mar 20, 2010

In IE, Safari, Chrome, and Opera (to an extent, still some bugs to work out there) the search suggestions show when you type in the box, and hide when you click away from the box, then re-appear when you click in the search box. In Firefox, however, the suggestions still show even when you click away from the box. I can't really figure out why it's happening, I've tried setting the CSS properties for both visibility and display, but neither worked. Here's the code for that part:

Code:
<input type="text" name="search" value="Search Cheezonastick" id="searchbox" onClick="this.value=''; this.style.color='#000000'; search_suggest.style.display='inline';" onBlur="this.value='Search Cheezonastick'; this.style.color='#666666'; [code]...

View 1 Replies View Related

Multiple Hidden DIV - Show / Hide On Click

Nov 23, 2010

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>

View 3 Replies View Related

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 View Related

How To Link To A Page With Different Default Show / Hide Tab Showing

Aug 2, 2009

I'm not allowed to post a link yet since I'm a newbie. But the page is here: tinyurl dot com /m8ajyp

This page (and others on the site) use javascript to show/hide some divs in order to have a tab-like interface.

Is there any way to link to this page with the "Past Events" div showing as the default? Right now you can see that "Coming Events" shows on page load. And that's the way we want it most of the time.

But there are places in the site where I'd like to link specifically to this page with the "Past Events" div showing on page load.code...

View 7 Replies View Related

Show/hide Certains Divs When A Link Is Clicked?

May 23, 2011

I need to show/hide certains divs when a link is clicked.These are my divs:

div1
div2
div3
div4
div5

I will have several links. Depending on which link is clicked it will hide/show several divs simultaneously For example, if link1 is clicked it will hide div1, div2 and div3 and show div4 and div5.

View 10 Replies View Related

Toggle Link Text And Show / Hide ID Onclick

Apr 20, 2010

I am trying to create a Link that changes its currently displayed text and also toggles the css.display property from inline to hidden. I'm sure there are solution outs there btu I have not been able to find one that does both functions with one click properly and is also easy to implement for people not as familiar with html and javascript. Obviously I am trying to create a show more, show less type link. currently this often shared code works fine to change the current state of the target ID's css.display from none to inline. My end goal is to be able to not only toggle the display of the LONG1 div but to also change the innerhtml of 'short1' from "Show More" to "Show Less".I am still learning about JS so Im really rough around the edges. I tried some different techniques btu I dont ahev them posted on my work pc.

View 14 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved