I would like to know how can I click on a text, and instead of linking to some external link, I would like to be able to display a paragraph on the same page.
For example, I want to have a hidden paragraph, and I want for it to be only be displayed when I click on some text.
I thought I can use "id", but I am not sure how!
<a id="tips">test</a>
Visit the Useful Tips Section
Any idea, how I can do this?
You don't necessarily Javascript. Your code is actually working, but you are not noticing it because both elements are one below the other. If you add a <div> with some height, you'll notice it.
Visit the Useful Tips Section
<div style="height: 1000px"></div>
<a id="tips">test</a>
(However, I don't mean you have to add this <div>).
you can use jquery to do it easily or if you want to avoid that, here is an alternate solution:
http://blog.movalog.com/a/javascript-toggle-visibility/
<script type="text/javascript"> <!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
} //--> </script>
Simply paste the above snippet of code underneath your tag and you call it by passing to it the ID of the element you wish to toggle the visibility of (this element can be anything that takes an id attribute). For example
<a href="#" onclick="toggle_visibility('foo');">
Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div>
or, in your case; include the function and:
<a id="tips" style="display:none;">test</a>
Visit the Useful Tips Section
Just takes some basic javascript code. This one right here is a good example. Comment if you want me to explain this in more detail.
<html>
<head>
<style type="text/css">
#text
{
display: none
}
</style>
<script type="text/javascript">
function callMe()
{
document.getElementById("text").style.display = 'block';
}
</script>
</head>
<body>
<div id="text">Hello! How are you?</div>
<form>
<input type="button" name="button" id="button" value= "Call Me" onclick="javascript:callMe()" />
</form>
<body>
</html>
Try add jquery and show the paragraph on click.
jsfiddle.net/6mk3a0ov/
Related
I would like to make a form where the you could hide (toggle) unnecessary lines using buttons (with jQuery). I have started working on a page but unless I can reuse the jQuery function I will have to write one function for every button which might be tens of times. How do I pass a variable to the function so that I can use the same function for all buttons?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#para1").toggle();
});
});
</script>
<script>
$(document).ready(function(){
$("#button2").click(function(){
$("#para2").toggle();
});
});
</script>
</head>
<body>
<button id="button1">Meat</button><br>
<div id="para1">Meat<br>
More meat</div>
<button id="button2">Bread</button><br>
<div id="para2">Bread<br>
More bread</div>
</body>
</html>
If you control the HTML (which it looks like you do), there are lots of ways to solve this. The general answer to your question is that you don't to pass info to the event handler. You can use the this value in the event handler that points to the clicked-on button to then figure out which para to operate on for that given click.
One option would be to add a data attribute to the button that tells it which div to toggle and then, in the click handler, fetch the data attribute from the clicked on button and toggle that item.
Data Attribute
<button class="buttonToggle" data-para="para1">Meat</button><br>
<div id="para1">Meat<br>
More meat</div>
<button class="buttonToggle" data-para="para2">Bread</button><br>
<div id="para2">Bread<br>
More bread</div>
<script>
$(document).ready(function(){
$(".buttonToggle").click(function(){
var id = $(this).data("para");
$("#" + id).toggle();
});
});
</script>
Common Container
You could also put both in a common container and use only class names like this:
<div class="toggleContainer">
<button class="buttonToggle">Meat</button><br>
<div class="foodItem">Meat<br>
More meat</div>
</div>
<div class="toggleContainer">
<button class="buttonToggle">Bread</button><br>
<div class="foodItem">Bread<br>
More bread</div>
</div>
<script>
$(document).ready(function(){
$(".buttonToggle").click(function(){
$(this).closest(".toggleContainer").find(".foodItem").toggle();
});
});
</script>
Dom Position
Or, you could keep with your current HTML and go strictly be position in the DOM:
<button id="button1">Meat</button><br>
<div id="para1">Meat<br>
More meat</div>
<button id="button2">Bread</button><br>
<div id="para2">Bread<br>
More bread</div>
<script>
$(document).ready(function(){
$("#button1, #button2").click(function(){
$(this).next().next().toggle();
});
});
</script>
Personally, I prefer the second option (with the common container) because it's very robust and uses only class names so you don't have to make ID values unique or maintain them and the code automatically works for however many of these blocks you have. As long as the two items (button and food item) stay in the container, the code doesn't have to change even if the HTML layout gets modified a bit.
The first option requires you to maintain id values. The second option requires you to keep the DOM position right between button and food item.
This example uses a custom data-hide attribute to define the element to hide.
Also notice that the click is bound to the class="button" = to every element with class button and not to the id.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".button").click(function(){
var elementToHide = $(this).data("hide");
$("#"+elementToHide).toggle();
});
});
</script>
</head>
<body>
<button class="button" id="button1" data-hide="para1">Meat</button>
<br>
<div id="para1">Meat<br>
More meat
</div>
<button class="button" id="button2" data-hide="para2">Bread</button>
<br>
<div id="para2">Bread<br>
More bread
</div>
First of all, I know that this question has been answered on this site numerous times and that is the main problem here. I am spoiled for choice in the answers and have been searching for a few hours, not finding anything directly similar. There must be plenty of ways to do this, but what I have right now is closest to what I want.
I have this for my code at the moment, for some reason the fiddle won't work, while it works fine in my code, must have missed something.
http://jsfiddle.net/PVLMX/
Html:
<div id="wrap">
<p>This text is visible, but there is more.<br/><br/>See more >>
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below
will hide this content again.</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content >></a></p>
</div>
</div>
Javascript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
I need to be able to call the function for each new "Read More" on the page. At the moment, the first "See More" is always the target of the javascript, and I am not sure how to call this function for other links on the page.
In HTML, each id="" must be a unique identifier, you can't put two id="example" so you need id="example" and id="example2" and so on.
Working jsfiddle: http://jsfiddle.net/PVLMX/2/
<div id="wrap">
<p>This text is visible, but there is more.<a href="#" id="example2-show"
class="showLink" onclick="showHide('example2');return false;"><br/><br/>See more >></a>
</p>
<div id="example2" class="more">
<p>This text was hidden, now you see it</p>
<p><a href="#" id="example2-hide" class="hideLink"
onclick="showHide('example2');return false;">Hide this content >></a></p>
</div>
</div>
What I changed:
every id="example.. to id="example2... in the second div.
load the script in "No wrap - in head" mode (jsfiddle left option)
In your fiddle you need to select the no wrap in <head> option. Your code works fine.
http://jsfiddle.net/uND9H/
Aslo you can't have duplicate id's
if you want to generalise this, there is a much easier way in jquery ie by using class you can bind click events and generalise them using class names. Here is an example , Check it out
$('.showLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-show","-hidden");
$('#'+name).css('display', 'inline-block');
});
$('.hideLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-hide","-hidden");
$('#'+name).css('display', 'none');
});
http://jsfiddle.net/AmarnathRShenoy/AMf8y/
You can use class names multiple times and you must always remeber that id can never be duplicated
Actually you can do it with jquery and much easier than you think
Jquery as follows:
$more = $('.more');
$('.showLink').click(function(e){
e.preventDefault();
$more.show();
})
$('.hideLink').click(function(e){
e.preventDefault();
$more.hide();
})
Also add a css style to display:none on .more class.
you can make it look a little nicer with slideToggle()
Here is a fiddle: http://jsfiddle.net/up36g/
Please excuse my ignorance, I have no idea what I'm doing, but I'm trying.
I attempted to figure it out by searching, but it has only yielded a functional result in jQuery. Since this is such a small section, I think it would be better to just use plain vanilla JavaScript instead of loading the entire jQuery library.
Does anyone know how/if I can accomplish the same functionality below, but with only normal JavaScript? Basically what I am trying to do is when "butt1" is clicked, the unordered list "links" will become hidden and the div "box1" will be shown:
<html>
<head>
<title>qwerty</title>
<style type="text/css">
.box1 {background: red;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$("#butt1").live("click", show_box1);
function show_box1(event) {
$("#links").css("display", "none");
$(".box1").css("display", "inline");
}
</script>
</head>
<body>
<ul id="links">
<li id="butt1">blah</li>
<li id="butt2">blah</li>
<li id="butt3">blah</li>
</ul>
<div class="box1" style="display: none;">You clicked butt1!</div>
</body>
</html>
Here's a link to the above as a working example: http://jsbin.com/umitef/4/ -- this is the functionality I want replicated.
My extended thanks to anyone who takes a moment.. :-)
You can use getElementById to select an element using an id (equivalent to $("#something")), and getElementsByClassName to select elements based on class name (equivalent to $(".something")), and you can use the style property to set the display style (equivalent to the jQuery .css method):
var boxes = document.getElementsByClassName("box1");
document.getElementById("butt1").onclick = function() {
document.getElementById("links").style.display = "none";
for(var i = 0; i < boxes.length; i++) {
boxes[i].style.display = "inline";
}
}
Note however that getElementsByClassName is not supported in older versions of IE, which is why jQuery can be useful even for small things - it shortens the code and irons out all the annoying little browser differences.
Also, one major difference between the above code and your jQuery is the use of the .live jQuery method, which monitors the DOM and attaches the event to any element matching the selector, whether it was in the DOM already or it gets added in the future. With the above code, if there is not already an element with id "butt1" in the DOM when the code runs, you will get a TypeError, because getElementById will return null.
$("#links").css("display", "none");
Could become:
document.getElementById('links').style.display = 'none';
Realistically, loading jQuery makes a lot of sense since you're doing it from the Google CDN. A lot of sites use that so there is a good probability that at some point at least some of your users have already downloaded it. Plus, jQuery compressed is a very small download. So much so that the readability of jQuery style code is worth it.
Ok, while the easiest way is to do it jQuery style you can still replicate that functionality in Javascript.
The key here is the getElementById function to grab the specific element you want to manipulate and then you simply set the element.style.display property to 'none' when you want to hide it and 'block' or 'inline' when you want to show it (depending on the context)
Here is my crack at it...
<head>
<title>qwerty</title>
<style type="text/css">
#box1 {background: red;}
#box2 {background: blue;}
#box3 {background: yellow;}
</style>
<script type="text/javascript">
function toggle_visibility(id) {
var ul = document.getElementById('links');
var box = document.getElementById(id);
if(ul.style.display == 'none')
{
ul.style.display = 'block';
box.style.display = 'block';
}
else
{
ul.style.display = 'none';
box.style.display = 'block';
}
}
</script>
</head>
<body>
<ul id="links">
<li id="butt1">blah</li>
<li id="butt2">blah</li>
<li id="butt3">blah</li>
</ul>
<div id="box1" style="display: none;">You clicked butt1!</div>
<div id="box2" style="display: none;">You clicked butt2!</div>
<div id="box3" style="display: none;">You clicked butt3!</div>
</body>
</html>
this is asuming that you only have one box
window.onload = function() {
var links = document.getElementById("links"),
box1 = document.getElementsByClassName("box1")[0];
links.onclick = function() {
links.style.display = "none";
box1.style.display = "inline";
};
};
The production compressed version of Jquery is only 31KB. Load it through http://code.google.com/apis/libraries/devguide.html#jquery . You dont have to load the UI if you dont need it. The amount of code to do what you want isnt worth the ease in Jquery. Plus like JamWaffles said if there are other places that you will use Jquery then just load it and use it.
I have a stack of <div> elements that show a name. I'd like to include a + link off to the side of each <div> that, when clicked, expands the <div> and adds more detailed information (from a RoR controller).
After poking around on the net, I found link_to_remote and related RoR stuff, but I can't seem to get the right combination to work together. Can someone point me to a tutorial or show what the controller and view interaction should look like?
Thanks!
You can do this really easily with Javascript in the example below:
<html>
<head>
<title>Text Page</title>
<script language="Javascript">
function toggleDiv(divid) {
if (document.getElementById(divid).style.visibility == 'hidden') {
document.getElementById(divid).style.visibility = 'visible';
}
else {
document.getElementById(divid).style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<span onClick="toggleDiv('div1');" style="cursor:pointer;">+</span>
<div id="div1" style="visibility:hidden;">This is DIV 1</div>
<span onClick="toggleDiv('div2');" style="cursor:pointer;">+</span>
<div id="div2" style="visibility:hidden;">This is DIV 2</div>
</body>
</html>
If you set the initial visibility of the DIV's to hidden, you can use the toggleDiv function shown above to toggle the visibility of any DIV given the ID. You will probably need to tweak the style definitions for the DIVs to display next to the plus signs (put them in adjacent <TD>'s in a table for example), but I figured I'd keep it simple.
Good Luck.
I'm looking for a wordpress plugin that hides to start with the when I click say an arrow image an ajax feature pops out with say a contact form inside and also another show hide feature at the bottom of the page to show and hide multiple divs.
Is there a plugin that can do all this?
My pages have to be editable for my client so it is impossible for me to build this into the theme. The javascript function needs to be part of a page.
I've found WP ShowHide Elements but this does not allow me to do it with multiple divs in the same placement.
Here's some of the script I'm using as allowed by the plugin in my pages
<p id="mytest">my text</p>
<p><a onclick="wp_showhide('mytest')" href="javascript:void(0);">my link</a></p>
<p id="new">new</p>
<p><a onclick="wp_showhide('new')" href="javascript:void(0);">new</a></p>
Thanks for your help
Regards
Judi
P.S. http://wordpress.digitalnature.ro/mystique/
Please notice the sidebar on this website, this is what I'm trying to achive but within the main page content
This short script works within a page but I want a swap div effect
How can I use this to work with multipe divs? - i'd like to change the visability of multiple divs all with the same space or div
<p><script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script></p>
<p><a onclick="toggle_visibility('foo');" href="#">Click here to toggle visibility of element #foo</a></p>
<div id="foo">This is foo</div>
<p><a onclick="toggle_visibility('too');" href="#">Click here to toggle visibility of element #too</a></p>
<div id="too">This is too</div>
I think I may have solved my own problem :)
Would love to know whether anyone can modify it so the 1st div is already open when the page loads
<p><script type="text/javascript">
lastone='empty';
function showIt(lyr)
{
if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';
}
</script></p>
<p>link</p>
<div id="divID" style="display: none;">content</div>
<p>link</p>
<div id="new" style="display: none;">content</div>
To answer your edit: can't you just remove the display:none style from the original div?
If you need to do it in Javascript, chuck a showIt('divID'); line in after your function.
To do it properly, add it into window.onload:
window.onload = showIt('divID');
Or more properly, have a function that enqueues into the onload (like this).
Or probably best, use a framework :)