I want to show 2 links - Show and Hide. When I click on Show, Show should be hidden and Hide should be visible and when I click on Hide, Hide should be hidden and Show should be visible. How can I achieve this in html?
with jquery in the head
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
and an id for each button
<input type='button' id='show' value='Show' />
<input type='button' id='hide' value='Hide' />
you can do it something like this untested code...
<script type='text/javascript'>
$(function(){
$('#show').click(function(){
$('#hide').hide()
})
$('#hide').click(function(){
$('#show').hide()
})
})
</script>
Do you really only want to hide "hide" when "show" is clicked and vice versa? Because that is what you asked for, but it doesn't really sound as a "standard" (toggle) behaviour.
But here it is:
See this snippet.
HTML:
SHOW
HIDE
JS:
var showElem = document.getElementById("show");
var hideElem = document.getElementById("hide");
showElem.onclick = function() {
hideElem.style.display = 'none';
}
hideElem .onclick = function() {
showElem.style.display = 'none';
}
Instead of .style.display = 'none'; you can use .style.visibility = 'hidden' which will still hide the link, but there will be empty space instead of it and it won't really completely dissapear (see this snippet).
Update: Based on discussion in the comments section new simple example was created (see this) that have more "standard" behaviour. In case the page is expected to be heavy on effects or other javascript functionality (like Ajax) I would recommend to use 3rd party library like jQuery to simplify the implementation - see answer by Billy Moon.
Related
I've been using a toggle script (open/close text container when clicking on a certain link) for a website that uses jQuery. In order to clean up the website I want to get rid of jQuery completely but have some problems converting the existing jQuery code into "normal javascript".
Here is the existing code:
jQuery(function($){
$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
return false; //Prevent the browser jump to the link anchor
});
});
});
Which corresponds to this HTML source code:
<h4 class="trigger toggle-transparent ">Click to show more</h3><div class="toggle_container ">
Hidden Text
</div>
I've tried the following code which doesn't give me an error but just doesn't do anything when clicking on the trigger:
var el = document.querySelectorAll('h4.trigger');
for(var i=0; i < el.length; i++){
el[i].addEventListener('click', function () {
this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
}.bind(this));
}
The only thing I really need for the code is: clicking on the class "trigger" should toggle some HTML class "active" to both the trigger element as well as the toggle_container element. The rest I'm able to change with just CSS.
The hard part of the code is that it should work for multiple toggle areas on one page separately (therefore using a class, not an id).
Any idea where my code has a problem or any (completely) different suggestions?
I have very limited experience with javascript/jQuery and feel more at home with HTML/CSS.
Thanks,
Patrick
The this.classList.toggle("active") doesn't return the element back again, but just a boolean to inform if the action was successful. Chaining happens only in jQuery and not in vanilla JavaScript.
this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
You should be using something like this instead of the above:
this.classList.toggle("active");
this.nextSibling.classList.toggle("toggle_container-active");
I have an HTML page with some paragraphs which I would like to show or hide via Javascript. What should I do? Do I have to use the display property in the CSS file too?
Thank you
EDIT: Since the paragraphs will be the error messages of a form, I'd like that at the beginning none of them were visibile.
You can do like this :
To hide :
document.getElementById("elementId").style.display = 'none';
To show:
document.getElementById("elementId").style.display = 'block';
To hide initially do this and better you put them in span not para
$(document).ready( function() {
$("span").hide();
});
And whenever you need them to show call a javascript function on submit button and show using same
$("span").show();
But do not do like this this will show all messages, Put your if else logic and than show them by Id or class using jquery
$("#id").show();
$(".class").show();
<script>
function showhide() {
document.getElementById('someimage').style.visibility="hidden";
}
</script>
At the moment I am able to hide the image, however then I have no way to show it again.
How can I hide and then be able to show an image when clicking a button using javascript?
Here's the button:
<body>
<input type="button" onclick="showhide()" />
</body>
Simply check what the current state is, and then act accordingly.
function showhide() {
var img = document.getElementById('someimage');
if (img.style.visibility === 'hidden') {
// Currently hidden, make it visible
img.style.visibility = "visible";
} else {
// Currently visible, make it hidden
img.style.visibility = "hidden";
}
}
And a quick note about jQuery to all those suggesting it.
For simple things like this, there is no need to include a big DOM manipulation library. If you are doing a lot of DOM manipulations like this in a more complex application, then jQuery starts to make more sense to include.
But it's also important to understand what jQuery is doing for you under the hood when you use it.
The wonders of jQuery - http://jsfiddle.net/PbG3t/
$(function() {
$('#button').click(function() {
$('#someimage').toggle();
});
});
If you are using jQuery, you can use the (.toggle) method which simplifies things a lot:
$('#someimage').toggle();
If you want to stick with a hand-crafted solution, I guess your code is actually missing the deciding bit that sets the element's visibility back to visible. Try:
<script>
function showhide() {
var element = document.getElementById('someimage');
element.style.visibility = element.style.visibility == 'visible'
? 'hidden'
: 'visible';
}
</script>
Cheers, Alex
Well it seems I know enough Javascript to hurt myself so I come asking help from you guys here. Here is what I am attempting to do and my issue.
I have two forms and only one will be filled out depending on the users choice. They will click one button or the other. When they click the button the form fades in and the button changes classes (goes from a light button to a dark button) Here is were I am running into issues. First I cannot get the form to fade in at all and the buttons will only change classes if I click them twice not once.
One other thing I am not sure how to go about is if I have say form 1 chosen but I meant to click form 2 then I want form one to fade out, form 2 to fade in and the buttons change accordingly. Here is my Code:
JS
<script type="text/javascript">
var $j = jQuery.noConflict();
var $jtest1 = $j('#test1');
var $jtest2 = $j('#test2');
$j("#button1").live('click',function(){
//Fade out form if shown and fade in form selected
$jtest2.fadeOut("slow", function(){
$jtest1.fadeIn("slow");
});
$j('#button1').live('click', function(){
//change class from light to dark
$j(this).addClass('dark_button').removeClass('light_button');
}); //I need to change this class to light if
// button 2 is selected and change button 2 to dark
});
</script>
HTML
<p class="light_button" id="button1">Test 1 </p>
<p class="light_button" id="button2">Test 2 </p>
<div class="hide" id="test1"><p>TEST</p></div>
<div class="hide" id="test2"><p>TEST 2</p></div>
Note: class="hide" is style="display:none"
Thanks for any help because I am a but stuck and not sure to go about this. Also please give me an example because I do not always follow when someone say change this to that etc.
Look at the code below, added comments on why
$j("#button1").live('click',function(){
//Fade out form if shown and fade in form selected
$jtest2.fadeOut("slow", function(){
$jtest1.fadeIn("slow");
});
//The following is inside the click so I do not get added until the first click
//and added after every click so I multiply!
//Hence why it takes 2 clicks
$j('#button1').live('click', function(){
//change class from light to dark
$j(this).addClass('dark_button').removeClass('light_button');
}); //I need to change this class to light if
// button 2 is selected and change button 2 to dark
});
You should be doing something like this
$j("#button1, #button2").live('click',
function(){
//figure out what button was clicked.
if(this.id === "button1"){
var btnA = $j(this);
var btnB = $j("#button2");
var divA = $j('#test1');
var divB = $j('#test2');
}
else{
btnA = $j(this);
btnB = $j("#button1");
divA = $j('#test2');
divB = $j('#test1');
}
//make sure it is not already active, no use to show/hide when it is already set
if(btnA.hasClass('dark_button')){
return;
}
//see if div is visible, if so hide, than show first div
if(divB.is(":visible")){
divB.fadeOut("slow", function(){
divA.fadeIn("slow");
});
}
else{//if already hidden, just show the first div
divA.fadeIn("slow");
}
//Add and remove classes to the buttons to switch state
btnA.addClass('dark_button').removeClass('light_button');
btnB.removeClass('dark_button').addClass('light_button');
}
);
jsfiddle example
Basically I have three images (call them img1, img2, img3) with three menus associated with each. (menu1, menu2, menu3)
When a user clicks img1, menu1 should pop up with three radio button selections (rad1, rad2, rad3). Say the user clicks rad2, menu1 should then hide and img2 should appear (but rad2 should still be selected). When img2 is clicked, menu2 then should show up with rad2 selected. Then if rad3 is clicked, menu2 hides and img3 shows up (but rad3 is still selected). And so on and so forth.
How to code this in javascript?
Here is an example of how to show a hidden div by clicking on an image.
<script language="javascript">
function showDiv() {
mydiv = document.getElementById('div1');
mydiv.style.display = 'block';
}
</script>
<div id='div1' style="display:none;">
<!-- content -->
</div>
<img src='img.gif' onclick='showDiv();'/>
It should be as easy as:
function img1clk() {
menu1div.style.display = "block";
}
function menu1radclk() {
menu1div.style.display = "none";
img1div.style.display = "block";
menu2div.style.display = "block";
}
and so on. You will have to initialize the elements so their onClick property is pointing to the correct function, but thats simply
img1div.onclick = ing1clk();
or in html
<div onclick="img1clk()"><img src="..."></div>
Hope this helps ya!
This becomes pretty easy if you use jQuery's built-in methods, such as show() or hide(). Don't re-invent the wheel and all that :)
If all 3 menus are essentially the same but just look different why not bring up the same menu every time but change its css class?
Also, I couldn't agree more that jQuery is the way to go. The jQuery site's own documentation I find a bit lame, but once you've got around the basics it's really intuitive.