Javascript Show Hide - Changing toggle action from Checkbox to <a href> links - javascript

currently I have a method of showing / hiding a div based on a form checkbox field as per below. What I do want however is to not use a form to show hide rather just call the show / hide function based on a simple on a link . I hope this makes sense what I am attempting to do. Any help /advice would be really valued!
<!-- Show hide-->
<script language="JavaScript">
function showhidefield()
{
if (document.goform.areas.checked)
{
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
else
{
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
}
</script>
<form name="goform" id="goform" action="xxxx" method="post" enctype="multipart/form-data">
<label><input name="areas" type="checkbox" onclick="showhidefield()" value="1"> Yes </label>
</form>
<div id="areaone" style="display:none;">
Area One
</div><!-- / Hideable area -->
<div id="areatwo" style="display:block;">
Area two
</div>
Changing the above so that rather than using a form checkbox to showhide, have a toggle effect based on event e.g.
Show Areaone / Hide Areatwo
Show Areatwo / Hide Areaone

General Approach
The general approach is to use the onclick property of link tags. You can set this directly on the tag like this:
<a onclick="showhidefield()" href="javascript:void(0);">Show/Hide</a>
Example 1
Here's a full working example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="areaone" style="display:none;">
Area one
</div>
<div id="areatwo" style="display:block;">
Area two
</div>
<script type='text/javascript'>
function showOneHideTwo(){
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
function showTwoHideOne(){
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
</script>
<a onclick="showOneHideTwo()" href="javascript:void(0);">Show one / Hide two</a>
<a onclick="showTwoHideOne()" href="javascript:void(0);">Show two / Hide one</a>
</body>
</html>
Example 2 (Better!)
However, for a variety of reasons, it is preferable, if slightly less intuitive, to use javascript to set the onclick property instead of adding it to the html directly. Here is a better full working example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="areaone" style="display:none;">
Area one
</div>
<div id="areatwo" style="display:block;">
Area two
</div>
<a id='showOneLink' href=''>Show one / Hide two</a>
<a id='showTwoLink' href=''>Show two / Hide one</a>
<script type='text/javascript'> <!-- This allows for better placement of the script as well... -->
//Same functions as before
function showOneHideTwo(){
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
function showTwoHideOne(){
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
//this time, we set the onclick here
//this is better form- it keeps the content (html) and the scripting (javascript) seperate
document.getElementById("showOneLink").onclick = function(){showOneHideTwo(); return false;}
document.getElementById("showTwoLink").onclick = function(){showTwoHideOne(); return false;}
</script>
</body>
</html>

Related

My JS Function that displays a block of HTML after pressing an OnClick button is buggy

I have a JS function that works with a button; basically, it's supposed to show the HTML code after clicking the button. However, for some reason, when I load the page, the HTML is visible before clicking the button; clicking the button once makes the code disappear, and then clicking it again makes the code re-appear. It seems like the function is doing the opposite of what I want it to do, but I have no idea why it's doing this: comparing my code to other code that does what I want it to do, I don't see any visible differences.
Here is the script:
<script>
function showTweet() {
var x = document.getElementById("tw-block-parent");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Here is the HTML that the script is supposed to make visible:
<div id="tw-block-parent">
<div class="timeline-TweetList-tweet">
<div class="timeline-Tweet">
<div class="timeline-Tweet-brand">
<div class="Icon Icon--twitter"></div>
</div>
<div class="timeline-Tweet-author">
<div class="TweetAuthor"><a class="TweetAuthor-link" href="#channel"> </a><span class="TweetAuthor-avatar">
<div class="Avatar"> </div></span><span class="TweetAuthor-name">TwitterDev</span><span class="Icon Icon--verified"> </span><span class="TweetAuthor-screenName">#TwitterDev</span></div>
</div>
<!--This is where the tweet text goes-->
<div id="timeline-Tweet-text_1"></div>
<div class="timeline-Tweet-metadata"><span class="timeline-Tweet-timestamp">9h</span></div>
<ul class="timeline-Tweet-actions">
<li class="timeline-Tweet-action"><a class="Icon Icon--heart" href="#"></a></li>
<li class="timeline-Tweet-action"><a class="Icon Icon--share" href="#"></a></li>
</ul>
</div>
</div>
</div>
And finally here is the HTML button:
<input type="submit" onclick="onClick(); showTweet();" id="submit-button" class="instructions" value="try me!">
The 'OnClick();' function works fine as far as I know, but just in case I'll post it here too.
<script>
//This function allows different inputs to display different text blocks
function onClick() {
if (document.getElementById("user_input").value === "I hate the EU!")
{
antiEuropeExample();
}
else if (document.getElementById("user_input").value === "I hate traffic!")
{
antiTrafficExample();
}
else if (document.getElementById("user_input").value === "I hate Trump!")
{
antiTrumpExample();
}
else if (document.getElementById("user_input").value === "I hate Facebook!")
{
antiFacebookExample();
}
else
{
alert("Wrong input buddy!");
}
}
</script>
I apologise for the amount of code I've posted here, I hope the question is understandable and that you guys can help! Thank you so much :)
All <div> elements have default styling display:block;, if you want to change the initial behavior of a particular element you have to add styling to it.
in your case i would advice changing this:
<div id="tw-block-parent">
to
<div id="tw-block-parent" style="display:none;">
This would make the div invisible at the start.

Toggle box wont work with button, but works with paragraph

Im trying to make a toggle menu, however when i insert a <button> tag instead of a <p> tag the whole menu doesn't work, but it works with <p>.
How can i solve this problem?
Snippet:
function toggleMenu() {
var menuBox = document.getElementById('menu-box');
if (menuBox.style.display == "block") { // if is menuBox displayed, hide it
menuBox.style.display = "none";
} else { // if is menuBox hidden, display it
menuBox.style.display = "block";
}
}
<div id="infobox2">
<form action="index.html" method="get">
<p onclick="toggleMenu()" id="menu"> Skapa konto </p>
<ul id="menu-box" style="display: block">
<li>Start</li>
<li>Animal</li>
<li>Pictures</li>
</ul>
</form>
</div>
The default behaviour of a button tag is to send the form. This is why the page is being reloaded. If you don't want the button to send the form, you have to specify a type attribute.
<button type="button">Toggle</button>
Further reading:
https://www.w3schools.com/tags/att_button_type.asp
Especially this part:
Tip: Always specify the type attribute for the element.
Different browsers may use different default types for the
element.
You have to prevent the default behaviour for the button . Just add return false in your function.
function toggleMenu() {
var menuBox = document.getElementById('menu-box');
if (menuBox.style.display == "block") { // if is menuBox displayed, hide it
menuBox.style.display = "none";
} else { // if is menuBox hidden, display it
menuBox.style.display = "block";
}
return false;
}
<div id="infobox2">
<form action="index.html" method="get">
<p onclick="toggleMenu()" id="menu"> Skapa konto </p>
<button onclick="toggleMenu()" id="menu1">Skapa konto1</button>
<ul id="menu-box" style="display: block">
<li>Start</li>
<li>Animal</li>
<li>Pictures</li>
</ul>
</form>
</div>

Show/Hide javascript query

I made this html test website to test show/hide javascript.
When I load the page, I would like to show the first page but in my website everything is hidden 'till I click on a button'.
<html>
<head><title>Test</title>
<script>
function toggle(target){
var artz = document.getElementsByClassName('article');
var targ = document.getElementById(target);
var isVis = targ.style.display=='block';
for(var i=0;i<artz.length;i++){
artz[i].style.display = 'none';
}
targ.style.display = isVis?'none':'block';
return false;
}
</script>
</head>
<body>
About Us
Contact
Products
<div class="article" id="about" style="display:none;">ABOUT PAGE...</div>
<div class="article" id="contact" style="display:none;">CONTACT PAGE...</div>
<div class="article" id="products" style="display:none;">PRODUCTS PAGE...</div>
</body>
</html>
Well, that's because all your elements are hidden and the toggle-function is only invoked on click.
Use this:
window.onload = function(){
toggle('about'); //or whichever page you'd like to show on startup
}
This function is invoked on page-load and calls the toggle-function, providing the content that shoud be shown.
Alternatively, you could just change your style="display:none;" to style="display:block;" in the HTML for the content that should be shown on page-load.

making a simple quiz system with direct answer

I know there are a lot of free/paid quiz systems out there, but none are customizable enough, especially that I need it in RTL direction.
Anyway, I have made this simple script: fiddle
<!-- question 1 -->
<div id="01">hello there
<br />
<input id="01_correct_btn" type="button" onclick="getElementById('01_correct').style.display = 'block';
getElementById('01_continue').style.display = 'block'; this.style.display = 'none'; getElementById('01_wrong_a').style.display='none';getElementById('01_wrong_b').style.display='none'" />Hi
<br />
<input id="01_wrong_a" type="button" onclick="getElementById('01_wrong').style.display = 'block';
getElementById('01_continue').style.display = 'block'; this.style.display = 'none'; getElementById('01_correct_btn').style.display='none';
getElementById('01_wrong_b').style.display='none'" />bye
<br />
<input id="01_wrong_b" type="button" onclick="getElementById('01_wrong').style.display = 'block';
getElementById('01_continue').style.display = 'block'; this.style.display = 'none'; getElementById('01_correct_btn').style.display='none';
getElementById('01_wrong_a').style.display='none'" />thanks
<br />____________________
<div id="01_correct" style="display:none">yep, you're right...
<br />
</div>
<div id="01_wrong" style="display:none">You are so wrong
<br />
</div>
<input style="display:none" type="button" id="01_continue" onclick="getElementById('01').style.display = 'none';
getElementById('02').style.display = 'block'" value="continue" />
</div>
<!-- question 2 -->
<div id="02" style="display:none">question 2: Welcome to the real world</div>
1: How can I hide all wrong answers without having to add all their ids (getElementByClassName didn't work)
2: Instead of re-copying the script for each question, can this be done by JavaScript where in each new form:
a. a "correct_btn" displays a "correct_note" and hides all other buttons
b. "wrong_btn"s display a "wrong_note" and hides all other buttons
c. both "correct_btn" and "wrong_btn"s will display the continue button
d. "continue" button hides current div/form and displays next one
It would be much easier this way to create as much questions as possible.
Thank you very much.
I would suggest looking at the HTML class system. As you can assign one class to multiple items. Then just create a script instead of calling the onclick javascript event.
I know you requested javascript, but you tagged JQuery and as I feel a JQuery script would serve you better for what you are trying to do I suggested that. Doing this with Javascript could get very wordy and complicated.
HTML
<div id="Q1">Hello There<br/>
<div class = "Q1 correct choice"><input type="button"/>Hi</div>
<div class = "Q1 wrong choice"><input type="button"/>Bye</div>
<div class = "Q1 wrong choice"><input type="button"/>Thanks</div>
</div>
<div id="Q1_Correct" style="display: none;">You are correct</div>
<div id="Q1_Wrong" style="display: none;">You are wrong</div>
You can also set up a generic correct/wrong message to be displayed.
Now, using JQuery would probably be easiest... like in this fiddle : http://jsfiddle.net/p5YY4/1/ (its not perfect, but some styling should solve some click issues... but I think you can get the gist)
JQuery
$('.choice').on('click', function() {
var parent = $(this).parent().attr('id');
if($(this).hasClass('correct')){
$('.choice').hide();
var response = "#" + parent + "_Correct";
$(response).show();
}
if($(this).hasClass('wrong')){
$('.choice').hide();
var response = "#" + parent + "_Wrong";
$(response).show();
}
});
Let me know if you have any questions about this.
For making the script native to one document here is what you would need to set up to get it to work :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//The script I have already provided should go here
});
</script>
You can also create a separate document and call it lets say quizWorker.js
and then using the same layout as I just stated (in the js file I would also put the script in the $(document).ready function)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="quizWorker.js"></script>

Show a div when a mouseover on a link

If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?
Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.
Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.
look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});
Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);

Categories