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]....
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.
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.
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].....
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$('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?
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:
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 RelatedI 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
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.
I'm not quite sure what this is called (tooltip, dialogue, popup, show/hide) but I've seen it around... I'd like to accomplish the following, as indicated in the attached image.
I want an image to automatically appear upon a user's visit 'pointing' to a specific link on my nav bar.
Ideally, this will load on users visit, then not load if/when they click the [x]...
[URL]
I'm trying to do a show/hide on a radio button click and I do have it working, but I'd like to make it more...extensible/independent of hard- coding children elements to show hide.
My dummy html structure is:
I left some commented out stuff at the top of the function, hopefully to give you an idea of what I tried.
In particular:
I was trying to get the first ul (the children to show/hide) on "this" (the radio button clicked). I'd like this to be flexible to where you could add more radio button/children and as long as the structure stays the same, the show/hide functionality works.
How To show Div After Click (tell friend) link and hide div after onsubmit form ? (Using Jquery or java script)
Example :
TELL FRIENDS CLICK LINK
<div id="formhide"></div> (default is hidden).
After Click Show Loading Message and show form for send data to any email . so if Form is valid Show loading message and message Success ! so hide dive ( to default).
Here's what I want to do:
1. Have a link (p.advert a.toggle) inside p.advert that tells p.hidden to show itself and at the same moment hides that link (p.advert a.toggle).
2. p.hidden must be closed by a link within himself.
3. When I close p.hidden, I need p.advert a.toggle to become visible so that the user can see p.hidden again by clicking on p.advert a.toggle.
4. The code must be reusable many times on the same page.
At the moment I can't get point 3 to work.
I have working code to Show/Hide content when clicked on link of particular section:
var showText="Show content FAQ1";
var hideText="Hide content FAQ1";
1. How to do link on particular Title and show this description like Description1, Description2 etc.
2. How to open some sections in advance inside Javascript?
Working code is the following using Jquery jqueryV1.4.4:
PHP Code:
<!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" xml:lang="en" lang="en">[code]....
I searched before more and more but I can't find those things that exactly I want.
I'm on design a new website, you can see this page: [URL]...in this page I have 3 hidden DIV, and at top of content area I have 3 buttons (About, Karan Group, Contact), please click on those buttons and see action.
I'd write this motions by jquery but it's really really amateur! because I have to define all things like below codes (as working for output):
[Code]...
I have a simple check box in an admin panel where the idea is that if it is checked then 'display' a div on the page, if it is not checked then hide it.When I tick the checkbox, the div shows up, but then disappears right away. (it does the fade-in display:block, but instantly changes back to display:none).
View 1 Replies View RelatedI have a list item, where only some of the items are linking to a quote from the client. The quotes are in another list, where each list item has an id corresponding to the client link. I want to show the client quote when you roll over the client anchor link. Currently when I mouseover it's showing nothing.
Here's my HTML
<!--client list-->
<ul id="clientList">
<li>no quote Client /</li>
<li><a href="#client1">Client 1</a> /</li>
<li>no quote Client /</li>
<li><a href="#client2">Client 2</a> /</li>
</ul>
<!--client testimonials--> .....
At the moment, when I mouseover one of the anchored client links, the content disappears, so it's not showing the correct client quote <li>.
$(document).ready(function() {
// see if the requested page url contains an anchor '#'
var hash = window.location.hash.substring(1);
// if no anchor, show the default blockqoute
if(!hash){
var id = 'default';
}else{
var id = hash;
} .....
I have a webpage with a left navigation bar and a content box with thumbnails in. I would like to be able to click one image and have all the thumbnails hide and show the larger version of the image in their place.
View 4 Replies View RelatedI 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.
I'm using a jquery slider for displaying content on a webpage.
[url]
Like in the first examples i have 5 panels, and i have a meta navigation, contact, links ect. all thedifferent content for the meta-navigation is displayed via jquery in panel 5, and is working fine.
Now my question; when the user is for example on the second panel, and the clicks on links, the page should show panel 5 (which is the index page(default.asp)), and then show only the content for the links.
I tried different stuff for loading the defautl.asp page, but it doesn't work. how do i tell, that if i click on the link wirh class="kontakt" the page should load the default.asp, and THEN do all the jquery stuff?
Below is one example, what i tried, but did not work.
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.
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.
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 RelatedI 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:
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?