Toggle box wont work with button, but works with paragraph - javascript

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>

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 text by clicking on hyperlink

I need to toggle the text on/Off in html without hiding any of the disabled functions. The following code can toggle on and off but the problem is this:
It cannot toggle without hiding another word. I.e. when I press turn on it hides The Turn Off function.
When I add the toggle method for another line item it only toggles the first line item. So it doesn't matter if I add it to line items five rows past the original it will only trigger the original.
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "On";
} else {
ele.style.display = "block";
text.innerHTML = "Turn Off";
}
}
<h1>Services</h1>
<h2>Subscribed Services</h2>
<ul>
<li>Geolocation -<a id="displayText" href="javascript:toggle();">On</a>
<div id="toggleText" style="display: none"></div>
</li>
<li>E-Mail Messaging -<a id="displayText" href="javascript:toggle();">On</a>
<div id="toggleText" style="display: none"></div>
</li>
</ul>
What am I doing wrong?
First of all some annotation to your code:
IDs have to be unique ! So use classes instead.
I hope I understand it correctly what you are trying to achieve:
HTML:
<h2>Subscribed Services</h2>
<ul>
<li>Geolocation -<a class="displayText" href="javascript:void(0);">On</a>
</li>
<li>E-Mail Messaging -<a class="displayText" href="javascript:void(0);">On</a>
</li>
</ul>
JS
$('.displayText').on('click', function(e) {
$(this).text(function(i, s) {
return s === 'On' ? 'Off' : 'On';
});
});
Example
Reference:
.text()

Show/Hide div using javascript without page refresh

I have a script that shows /hides multiple independent divs on a page. The problem is that when you click to show a div, no matter where on the page, it will automatically focus on the first div. Is there a way to focus on the div that was displayed?
here is the javascript:
function toggleOptions(e) {
var ele = e;
var text = e.parentElement.querySelector('.toggleOptions')
if(text.style.display == "none") {
//ele.style.display = "none";
text.style.display = "block";
text.innerHTML = "TESTING";
ele.innerHTML = "hide";
}
else {
text.style.display = "none";
//text.innerHTML = "Hide GPS";
ele.innerHTML = "show";
}
return false;
}
here is the html:
<div>
<a href="#" onclick="toggleOptions(this);" style="display:block;">
show
</a>
<div class="toggleOptions" style="display: none">
ITEM 1 OPTIONS
</div>
</div>
<div>
<a href="#" onclick="toggleOptions(this);" style="display:block;">
show
</a>
<div class="toggleOptions" style="display: none">
ITEM 2 OPTIONS
</div>
</div>
<div>
<a href="#" onclick="toggleOptions(this);" style="display:block;">
show
</a>
<div class="toggleOptions" style="display: none">
ITEM 3 OPTIONS
</div>
</div>
here is a jfiddle of the work http://jsfiddle.net/YE6XZ/1/
Give your show links a class, like:
<a class="show" href="#" onclick="toggleOptions(this);" style="display:block;">show</a>
Then add this to your jQuery:
$('a.show').click(function(e){
e.preventDefault();
});
The default action for a bookmark anchor (href="#") is to jump to the top of the page. This would prevent that. jsFiddle example
An alternative, jQuery-less method would be to change your onclicks to:
onclick="return toggleOptions(this);"
As you are already returning false. jsFiddle example
I believe you could also use the .focus() method to focus on a given element. In your example:
function toggleOptions(e) {
var ele = e;
var text = e.parentElement.querySelector('.toggleOptions')
if(text.style.display == "none") {
//ele.style.display = "none";
text.style.display = "block";
text.innerHTML = "TESTING";
text.focus(); //This should give focus to the newly shown text element
ele.innerHTML = "hide";
}
else {
text.style.display = "none";
//text.innerHTML = "Hide GPS";
ele.innerHTML = "show";
}
return false;
}
Unless I am misunderstanding what you are looking to do....
use javascript:void(0) in href. Use javascript functions to show or hide using id
Show

Hide/Show a div in a list

I have a list with an arbitrary number of items. Each item has a number of actions that can be done onto it. I want to display those actions in a div that appears when the user clicks a link associated with the specific list item.
I have tried the following code but when I click the link it just shows the first hidden div and not the hidden div associated with the link.
<script language="javascript">
function toggleOptions() {
var ele = this;
var text = this.parentNode.getElementsByClassName("displayOptions");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "TESTING";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide GPS";
}
}
HERE IS THE HTML. The list could be endless though, this is just an excerpt of the list.
<a href="javascript:toggleOptions();">
ITEM 1 OPTIONS
</a>
<div class="toggleOptions" style="display: none">
ITEM 1 OPTIONS
</div>
<a href="javascript:toggleOptions();">
ITEM 2 OPTIONS
</a>
<div class="toggleOptions" style="display: none">
ITEM 2 OPTIONS
</div>
<a href="javascript:toggleOptions();">
ITEM 3 OPTIONS
</a>
<div class="toggleOptions" style="display: none">
ITEM 2 OPTIONS
</div>
put another div or something around each group: ... put the toggleOptions() function to onclick and pass the href a # so that it is not empty... pass toggleOptions(this) to know which element is clicked
<div>
<a href="#" onclick="toggleOptions(this);" style="display:block;">
SHOW
</a>
<div class="toggleOptions" style="display: none">
ITEM 1 OPTIONS
</div>
</div>
<div>
<a href="#" onclick="toggleOptions(this);" style="display:block;">
SHOW
</a>
<div class="toggleOptions" style="display: none">
ITEM 2 OPTIONS
</div>
</div>
<div>
<a href="#" onclick="toggleOptions(this);" style="display:block;">
SHOW
</a>
<div class="toggleOptions" style="display: none">
ITEM 3 OPTIONS
</div>
</div>​
try with this here http://jsfiddle.net/YE6XZ/1/
function toggleOptions(e) {
var ele = e;
var text = e.parentElement.querySelector('.toggleOptions')
if(text.style.display == "none") {
//ele.style.display = "none";
text.style.display = "block";
text.innerHTML = "TESTING";
ele.innerHTML = "hide";
}
else {
text.style.display = "none";
//text.innerHTML = "Hide GPS";
ele.innerHTML = "show";
}
return false;
}
.toggleOptions is not a valid id DOM attribute value. Are you trying to get an element by its className? Then you should use getElementsByClassName instead, or remove the leading dot in the literal.

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

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>

Categories