We Keep Coding

How to collapse section using Javascript on single click?

I know this question has been asked multiple times and I have tried different things which are not working.
All I want to do is collapse a section on the click of a button, but I have to click button twice before it actually collapses
(In CollapseGrid is getting printed twice and then it goes to In Collapse).
How do we make it work in one go without having to click twice?
function collapseGrid(element) {
console.log("In CollapseGrid");
element.addEventListener("click", collapse);
};
function collapse() {
console.log("In Collapse");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
}
<button class="info" onClick="collapseGrid(this)">CLICK</button>
<div class="contnet">
<p>This should be collapsed.</p>
</div>

Your section gets collapsed on the second click because on the first click you are simply assigning a click listener, but not really executing the collapse function. The code you included inside collapseGrid() should be written outside of the function. Then just make the button invoke collapse() rather than collapseGrid().
document.querySelector(".info").addEventListener("click", collapse);
function collapse(e) {
var content = e.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
}
<button class="info" onClick="collapse(this)">CLICK</button>
<div class="contnet" style="display:block">
<p>This should be collapsed.</p>
</div>

Here is a simple way to achieve it with a fairly generic function and a some data attributes.
var elements = document.querySelectorAll('[data-toggle="collapse"]');
elements.forEach(element => element.addEventListener('click', collapse));
function collapse() {
var target = this.getAttribute('data-target');
var element = document.getElementById(target);
element.style.display = element.style.display == "none" ? "block" : "none";
}
<div>
<button class="info" data-toggle="collapse" data-target="collapse1">CLICK 1</button>
<div class="content" id="collapse1">
<p>This should be collapsed.</p>
</div>
</div>
<div>
<button class="info" data-toggle="collapse" data-target="collapse2">CLICK 2</button>
<div class="content" id="collapse2">
<p>This should be collapsed.</p>
</div>
</div>

Why don't you simply collapse the next element in the collapseGrid function? e.g.
function collapseGrid(me) {
var content = me.nextElementSibling;
content.style.display = content.style.display == "none" ? "block" : "none";
}
<button class="info" onClick="collapseGrid(this)">CLICK</button>
<div class="content">
<p>This should be collapsed.</p>
</div>

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>

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()

Onclick method using JavaScript error

I found an onclick example here. I did everything given on the page and I don't know what's wrong/going on.
I did what's given there and when I create a new page, it's not working. What's going wrong?
JSFiddle
HTML
<div id="leftmenu">
<ul id="leftmenuidfrmslt" style="vertical-align: middle;">
<a href="" onclick="mob();"><li><span class="flaticon-smart">
</ul>
</div>
JavaScript
function mob() {
hidemenus();
document.getElementById('mobi').style.display = "block";
}
function hidemenus() {
document.getElementById('mobi').style.display = "none";
}
Onclick display menu
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >
<p class="flaticon-right127">Mobile Phones
<p class="flaticon-right127">Tablets</p>
<p class="flaticon-right127">Mobile Accessories</p>
</div>

At a quick glance through your code, you are trying to find an element by ID 'mobi' but there is no element that has that ID in the jsfiddle you provided.
So the function doesn't do anything because it can't find the element which it can apply the change/action to.
I tried a few other ids: 'elec', 'vehi' and couldn't find elements with those IDs either.

You have to set id attribute of the links.
For example:
<a href="" onclick="mob();">
Add this line its id:
<a id="mobi" href="" onclick="mob();">

Try something like this to make it more simple:
var allIds = ['mobi','elec','vehi','home','pets','book','clot','kids','spor','serv','jobs','real'];
function hideAll() {
for( id in allIds ) {
document.getElementById( id ).style.display = "none";
}
}
function showMenu( idToShow ) {
hideAll();
document.getElementById( idToShow ).style.display = "block";
}
In you're HTML you can now:
Also, as Code Whisperer pointed out, the elements you want to show should have ids:
<div id="elec"></div>

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.