how to toggle different divs with javascript

how to toggle different divs with javascript - javascript

function toggleB(){
var b1 = document.getElementById("1");
var b2 = document.getElementById("2");
var b3 = document.getElementById("3");
if (b1.style.display === "none"){
b1.style.display = "none";
} else {
b1.style.display = "block";
}
if (b2.style.display === "none"){
b2.style.display = "none";
} else {
b2.style.display = "block";
}
if (b3.style.display === "none"){
b3.style.display = "none";
} else {
b3.style.display = "block";
}
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<body>
<div id="imgBtns">
<div id="b1">
<input onclick="toggleB" type="image" src="/">
B1
</div>
<div id="b2">
<input onclick="toggleB" type="image" src="/">
B2
</div>
<div id="b3">
<input onclick="toggleB" type="image" src="/">
B3
</div>
</div>
<div class="main">
<div id="mainText">
<p>This should be displayed first without b1,b2,b3 showing</p>
</div>
<div id="button1">
<p>you clicked b1</p>
</div>
<div id="button2">
<p>you clicked b2</p>
</div>
<div id="button3">
<p>you clicked b3</p>
</div>
</div>
</body>
</html>
I want the javascript function to be able toggle between showing divs(b1,b2,b3) by clicking their image button or a tag. Once an img input button or a tag is clicked it should remove the "mainText" and only show the clicked div to the user. The mainText div should be removed and be replaced with the corresponding button div that is clicked.
function toggleB{
var b1 = document.getElementById("1");
var b2 = document.getElementById("2");
var b3 = document.getElementById("3");
if (b1.style.display === "none"){
b1.style.display = "none";
} else {
b1.style.display = "block";
}
if (b2.style.display === "none"){
b2.style.display = "none";
} else {
b2.style.display = "block";
}
if (b3.style.display === "none"){
b3.style.display = "none";
} else {
b3.style.display = "block";
}
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<body>
<div id="imgBtns">
<div id="b1">
<input onclick="toggleB" type="image" src="/">
B1
</div>
<div id="b2">
<input onclick="toggleB" type="image" src="/">
B2
</div>
<div id="b3">
<input onclick="toggleB" type="image" src="/">
B3
</div>
</div>
<div class="main">
<div id="mainText">
<p>This should be displayed first without b1,b2,b3 showing</p>
</div>
<div id="1">
<p>you clicked b1</p>
</div>
<div id="2">
<p>you clicked b2</p>
</div>
<div id="3">
<p>you clicked b3</p>
</div>
</div>
</body>
</html>
function toggleB{
var b1 = document.getElementById("1");
var b2 = document.getElementById("2");
var b3 = document.getElementById("3");
if (b1.style.display === "none"){
b1.style.display = "none";
} else {
b1.style.display = "block";
}
if (b2.style.display === "none"){
b2.style.display = "none";
} else {
b2.style.display = "block";
}
if (b3.style.display === "none"){
b3.style.display = "none";
} else {
b3.style.display = "block";
}
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<body>
<div id="imgBtns">
<div id="b1">
<input onclick="toggleB" type="image" src="/">
b1
</div>
<div id="b2">
<input onclick="toggleB" type="image" src="/">
b2
</div>
<div id="b3">
<input onclick="toggleB" type="image" src="/">
b3
</div>
</div>
<div class="main">
<div id="mainText">
<p>This should be displayed first without b1,b2,b3 showing</p>
</div>
<div id="1">
<p>b1</p>
</div>
<div id="2">
<p>b2</p>
</div>
<div id="3">
<p>b3</p>
</div>
</div>
</body>
</html>

You whole concept is far too complicated.
Instead, put the id of the div to toggle into a data-toggles-Attribute. Then dynamically select that div and toggle the hidden attribute.
A simplified example:
const buttons = document.querySelectorAll('[data-toggles]');
buttons.forEach(button => button.addEventListener('click', (event) => {
const toggleDiv = document.getElementById(button.dataset.toggles);
toggleDiv.toggleAttribute('hidden');
}));
.toggle-divs>div[id] {
background-color: #a00;
color: white;
margin: 10px;
text-align: center;
width: 200px;
}
.toggle-divs>div[id]::before {
content: "#"attr(id)" here";
}
<div class="toggle-buttons">
<button data-toggles="foo">toggle #foo</button>
<button data-toggles="bar">toggle #bar</button>
<button data-toggles="baz">toggle #baz</button>
</div>
<div class="toggle-divs">
Below here is the toggle divs:
<div id="foo" hidden></div>
<div id="bar" hidden></div>
<div id="baz" hidden></div>
</div>

Related

URL display:none;

I have this code, for some reason when I try to access it with a link (http://127.0.0.1:5501/111.html?textarea=2&p=2) the textarea part remains the same, I'm probably doing something wrong, but I'm not sure how to fix it.
When I open the link I want to see textarea 2 and p 2 visible, the rest should be hidden.
Here is the code in case someone from the forum can help:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="stylechat.css">
<meta charset="UTF-8">
<title>Support</title>
<meta http-equiv="Content-Type">
</head>
<body data-new-gr-c-s-check-loaded="14.1022.0" data-gr-ext-installed="">
<!-- nav -->
<div class="navbar">
<div class="container">
<a class="logo" href="./index.html">Ho<span>me</span></a>
</div>
</div>
<!-- nav -->
<!-- info -->
<div class="textinfo">
<p class="menus" id="dsk1"><span>AAA:</span><br>
One:<br><br>
1. test<br>
2. test<br></p>
</div>
<div class="textinfo">
<p class="menus" id="dsk2"><span>AAA:</span><br>
Two:<br><br>
1. test<br>
2. test<br></p>
</div>
<!-- info -->
<!-- text -->
<div class="textniz">
<textarea id="myInput1" class="one" name="myInput1" readonly>
One
One
One</textarea>
</div>
<div class="textniz">
<textarea id="myInput2" class="two" name="myInput2" readonly>
Two
Two
Two</textarea>
</div>
<div class="textniz">
<textarea id="myInput3" class="three" name="myInput3" readonly>
Three
Three
Three</textarea>
</div>
<div class="textniz">
<textarea id="myInput4" class="four" name="myInput4" readonly>
Four
Four
Four</textarea>
</div>
<div class="textniz">
<textarea id="myInput5" class="five" name="myInput5" readonly>
Five
Five
Five</textarea>
</div>
<div class="textniz">
<textarea id="myInput6" class="six" name="myInput6" readonly>
Six
Six
Six</textarea>
</div>
<div class="textniz">
<textarea id="myInput7" class="seven" name="myInput7" readonly>
Seven
Seven
Seven</textarea>
</div>
<div class="textniz">
<textarea id="myInput8" class="eight" name="myInput8" readonly>
Eight
Eight
Eight</textarea>
</div>
<!-- text -->
<!-- scr -->
<div class="scrn" id="scrn">
<img src="/Screenshot_1.png" alt="" class="image1"></img>
<img src="/Screenshot_2.png" alt="" class="image2"></img>
<img src="/Screenshot_3.png" alt="" class="image3"></img>
<img src="/Screenshot_5.png" alt="" class="image4"></img>
</div>
<!-- scr -->
<!-- button -->
<button onclick="showscr(1)" id="scr1" class="scron1"></button>
<button onclick="showscr(2)" id="scr2" class="scron2"></button>
<button onclick="Copytextfunction(1)" id="menucopy1" class="menucopy1"></button>
<button onclick="Copytextfunction(2)" id="menucopy2" class="menucopy2"></button>
<button onclick="Copytextfunction(3)" id="menucopy3" class="menucopy3"></button>
<button onclick="Copytextfunction(4)" id="menucopy4" class="menucopy4"></button>
<button onclick="Copytextfunction(5)" id="menucopy5" class="menucopy5"></button>
<button onclick="Copytextfunction(6)" id="menucopy6" class="menucopy6"></button>
<button onclick="Copytextfunction(7)" id="menucopy7" class="menucopy7"></button>
<button onclick="Copytextfunction(8)" id="menucopy8" class="menucopy8"></button>
</div>
<!-- button -->
<!-- script -->
<script>
// Get textarea from url parameters
const urlParams = new URLSearchParams(window.location.search);
let textarea = urlParams.get('textarea')
function show(textarea) {
for (let check = 1; check <= 8; check++) {
document.getElementById('myInput' + check).style.display = "none";
document.getElementById('menucopy' + check).style.display = "none";
}
document.getElementById('myInput' + textarea).style.display = "block";
document.getElementById('menucopy' + textarea).style.display = "block";
}
let p = urlParams.get('p')
function show(p) {
for (let check = 1; check <= 2; check++) {
document.getElementById('dsk' + check).style.display = "none";
document.getElementById('dsk' + check).style.display = "none";
}
document.getElementById('dsk' + p).style.display = "block";
document.getElementById('dsk' + p).style.display = "block";
}
function Copytextfunction(textarea) {
var value = document.getElementById('myInput' + textarea).value;
var copyText = document.createElement("textarea");
copyText.value = value;
copyText.style.position = "fixed";
copyText.style.top = "-1000vh";
document.body.append(copyText);
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
console.log(value);
copyText.remove();
}
// Run the hide function with the textarea number from parameters
if (textarea) {
show(textarea);
}
if (p) {
show(p);
}
</script>
<!-- script -->
</body>

Remove appended element

When I type something in the first box, and click Next, the word I typed is inserted on my page. However, if I click Back and then click Next again, it is printed a second time.
I want the keyword appended after I've clicked Next to be deleted if I click Back so that if I click Next again it is printed only once (and updated if I have made any edit).
document.addEventListener("DOMContentLoaded", function() {
var stepOne = document.getElementsByClassName("step-1");
var stepTwo = document.getElementsByClassName("step-2");
var nextButton = document.getElementsByClassName("next");
var backButton = document.getElementsByClassName("back");
nextButton[0].onclick = function() {
stepOne[0].style.display = "none";
stepTwo[0].style.display = "block";
var inputKeyword = document.getElementById("inputJobTitle").value;
var newKeyword = document.createElement("p");
newKeyword.setAttribute("id", "retrievedField-1");
newKeyword.setAttribute("class", "retrievedFieldName");
newKeyword.innerText = inputKeyword;
newKeyword.setAttribute("id", "retrievedField-1");
newKeyword.setAttribute("class", "retrievedFieldName");
document.getElementById("retrievedFields").appendChild(newKeyword);
}
backButton[0].onclick = function() {
stepOne[0].style.display = "block";
stepTwo[0].style.display = "none";
}
})
.step-1 {
display: block;
}
.step-2 {
display: none;
}
<!--STEP 1-->
<div class="main step-1">
<div class="tab" id="tab-1">
<div class="inputFields">
<p id="jobtitle" class="inputFieldName">Job title</p>
<input type="search" id="inputJobTitle" class="inputBar" />
<p class="and">AND</p>
</div>
<div class="button">
<button class="next">Next ></button>
</div>
</div>
</div>
<!--STEP 2-->
<div class="main step-2">
<div class="tab" id="tab-1">
<div class="inputFields">
<div id="retrievedFields"></div>
<input type="search" class="inputBarAlternative" />
<div class="add">
<button class="addButton">+ Add Keyword</button>
<p id="addKeyword">
Add a skill or keyword that must be in your search results
</p>
</div>
</div>
<div class="buttons">
<button class="back">Back</button>
<button class="next">Next</button>
</div>
</div>
</div>
</body>

Each new click on the next button will trigger an append. So you just have to do the opposite of an append on the click on back. Just add this line in your onclick:
document.getElementById("retrievedFields").removeChild(document.getElementById("retrievedFields").lastElementChild);

You could also check to see if the element exists before you create it..
nextButton[0].onclick = function() {
stepOne[0].style.display = "none";
stepTwo[0].style.display = "block";
var inputKeyword = document.getElementById("inputJobTitle").value;
var newKeyword = document.getElementById("retrievedField-1")
if (!newKeyword) {
newKeyword = document.createElement("p");
newKeyword.setAttribute("id", "retrievedField-1");
newKeyword.setAttribute("class", "retrievedFieldName");
document.getElementById("retrievedFields").appendChild(newKeyword);
}
newKeyword.innerText = inputKeyword;
}

On click show / hide content

I have a problem with javascript show/hide content from div. When I click on the first button I got content from that but when I click on the second I need to hide content from first and show content from second div. My code for this is:
<script type="text/javascript">
function showHideDiv(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
function showHideDiv1(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
</script>
HTML:
<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv1('divMsg1')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" style=" display:none">
<b>Places</b>
</div>
<div id="divMsg1" style="display:none">
<b>Events</b>
</div>
</div>
How to solve this when clicking on second button to hide content from the first button. Thanks, all

You could do with toggle the class based on clicked element
function showHideDiv(ele) {
var srcElement = document.getElementById(ele);
document.querySelectorAll('.box').forEach(a => a.classList.add('hide'))
if (srcElement != null) {
srcElement.classList.toggle('hide')
}
}
.hide {
display: none;
}
<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv('divMsg1')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" class="box hide">
<b>Places</b>
</div>
<div id="divMsg1" class="box hide">
<b>Events</b>
</div>
</div>

You could use a generic function which takes the actual elements to be shown or hidden as input parameters.
function showHideDiv(show, hide) {
document.getElementById(show).style.display = "block";
document.getElementById(hide).style.display = "none";
}
<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg','divMsg1')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv('divMsg1','divMsg')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" style=" display:none">
<b>Places</b>
</div>
<div id="divMsg1" style="display:none">
<b>Events</b>
</div>
</div>

jquery - attach/detach multiple divs onclick

I am trying to replace the content of the divs on checkbox's check/un-check events.
HTML:
<div class="checks">
<input type="checkbox" class="section-1" value="section-1">check-1
<input type="checkbox" class="section-2" value="section-2">check-2
<input type="checkbox" class="section-3" value="section-3">check-3
<input type="checkbox" class="section-4" value="section-4">check-4
<input type="checkbox" class="section-5" value="section-5">check-5
<input type="checkbox" class="section-6" value="section-6">check-6
<input type="checkbox" class="section-7" value="section-7">check-7
</div><br><br>
<div class="divs">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
<div class="divs-back" style="display: none">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
jQuery:
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
if ($(this).prop('checked')) {
// Add the new element if checked:
if (array.indexOf($(this).val()) < 0) {
array.push($(this).val());
unChecked = unArray.slice(-1)[0];
unArray.splice(-1, 1);
}
} else {
// Remove the element if unchecked:
if (array.indexOf($(this).val()) >= 0) {
array.splice(array.indexOf($(this).val()), 1);
unArray.push($(this).val());
unChecked = 0;
}
}
showHideDiv($(this).val(), unChecked);
console.log(array);
console.log(unArray);
});
function showHideDiv(value, unCheked) {
console.log(unCheked);
if (unCheked != '0') {
$('.divs').find("." + unCheked).html($('.divs-back').find("." + value).html());
} else {
$('.divs').find("." + value).html('');
}
}
It is replacing the contents successfully on first attempt. But on the second attempt, the positions of the div contents are changed so not getting the desired output.
jsfiddle: https://jsfiddle.net/2th5gmLa/
Edit:
Actually, I don't want to just hide show. I want to replace the div content on last unchecked section. When I uncheck Section-1, Section-2, Section-3, then if we check section-1, then it should place in the DIV of the Section-3.

Why your code is not working?
The issue is you are pushing element. The push() method adds new items to the end of an array, and returns the new length.
//array.push($(this).val());
remove this line
Change you have to make.
$('input[type="checkbox"]').click(function() {
var unchkdArray = [];
var chkdArrray = [];
$('input[type="checkbox"]').map(function(){
if ($(this).is(':checked')) {
chkdArrray.push($(this).val())
} else {
unchkdArray.push($(this).val())
}
});
var selected = $(this).val()
if ($(this).is(':checked')) {
$('div.' + selected).show()
} else {
$('div.' + selected).hide()
}
});
Fiddle Demo

Try this...
Plunker Link
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
console.log($(this)['context']['className']);
$( ".divs ."+$(this)['context']['className'] ).toggleClass( "hide" )
});
Plunker Link

How can keep format when spoiler sections are opened?

I have been working on a project lately which uses js, css and HTML. I have a problem in which when the spoiler buttons expand, the other buttons lose their position, how would i fix this?
(Problem) http://imgur.com/a/PVq1R
html code:
<html>
<head>
<title> Tricks & Flips Progression </title>
<link type="text/css" rel="stylesheet" href="C:\Users\zhewi2\Desktop\website\stylesheet.css"></link>
<script type='text/javascript' src="C:\Users\zhewi2\Desktop\website\style.js"></script>
</head>
<h2 id=learn>What I want to learn (progress to sand)</h2>
<div class="learn">
<input type="button" onclick="showSpoiler1(this);" value="Front flip variaion (ramp)" />
<div1 class="inner" style="display:none;">
<ul>
<li>Front full</li>
<li>Double Front</li>
<li>Aerial Twist</li>
</ul>
</div1>
<div class="learn">
<input type="button" onclick="showSpoiler2(this);" value="Front flip variaion (flat)" />
<div2 class="inner" style="display:none;">
<ul>
<li>front 180</li>
<li>Webster</li>
<li>Loser</li>
</ul>
</div2>
<div class="learn" id="learn1">
<input type="button" onclick="showSpoiler3(this);" value="Backflip variations" />
<div3 class="inner" style="display:none;">
<ul>
<li>Off-axis backtuck</li>
<li>Back Full</li>
</ul>
</div3>
<div class="learn" id="learn2">
<input type="button" onclick="showSpoiler4(this);" value="Sideflip Variations (ramp)" />
<div4 class="inner" style="display:none;">
<ul>
<li>Tunnel flip</li>
</ul>
</div4>
<div class="learn">
<input type="button" onclick="showSpoiler5(this);" value="Twists and other tricks" />
<div5 class="inner" style="display:none;">
<ul>
<li>B-Twist</li>
<li>Grandmaster Swipe</li>
</ul>
</div5>
<h2 id=progress>What I can do into sand (progress to flat)</h2>
<div class="learning">
<input type="button" onclick="showSpoiler6(this);" value="Backflip variations" />
<div6 class="inner" style="display:none;">
<ul>
<li>Layout</li>
<li>Swing Gainer</li>
<li> standing ST backflip</li>
</ul>
</div6>
<div class="learning">
<input type="button" onclick="showSpoiler7(this);" value="Frontlip variations (ramp)" />
<div7 class="inner" style="display:none;">
<ul>
<li>Iron man</li>
<li>Webster</li>
<li>Front Layout</li>
</ul>
</div7>
<h2 id=learnt> What I can do flat (grass and above)</h2>
<div class="learnt">
<input type="button" onclick="showSpoiler8(this);" value="Backflip variations" />
<div8 class="inner" style="display:none;">
<ul>
<li>Backtuck</li>
</ul>
</div8>
</html>
CSS code:
#learn {
color:red;
}
#progress {
color:orange;
}
#learnt {
color:green;
}
div1 {
color:blue;
}
div2 {
color:blue;
position:relative;
left: 150px;
}
div3 {
color:blue;
position:relative;
left: 300px;
}
div4 {
color:blue;
position:relative;
left: 450px;
}
div5 {
color:blue;
position:relative;
left: 600px;
}
div6 {
color:blue;
}
div7 {
color:blue;
position:relative;
left: 120px;
}
div8 {
color:blue;
}
.learn {
display:inline;
}
.learning {
display:inline;
}
.learnt {
display inline;
}
JS code:
function showSpoiler1(obj)
{
var inner = obj.parentNode.getElementsByTagName("div1")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler2(obj)
{
var inner = obj.parentNode.getElementsByTagName("div2")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler3(obj)
{
var inner = obj.parentNode.getElementsByTagName("div3")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler4(obj)
{
var inner = obj.parentNode.getElementsByTagName("div4")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler5(obj)
{
var inner = obj.parentNode.getElementsByTagName("div5")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler6(obj)
{
var inner = obj.parentNode.getElementsByTagName("div6")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler7(obj)
{
var inner = obj.parentNode.getElementsByTagName("div7")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler8(obj)
{
var inner = obj.parentNode.getElementsByTagName("div8")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
How can I keep the spoiler buttons in a line while their content expands below them?

You could make it a fair bit more dynamic, but it will make it more complicated, so I'll stick to the basics.
You could just put all the buttons together, and then have the spoiler sections:
<input type="button" onclick="showSpoiler1(this);" value="Front flip variaion (ramp)" />
<input type="button" onclick="showSpoiler2(this);" value="Front flip variaion (flat)" />
<input type="button" onclick="showSpoiler3(this);" value="Backflip variations" />
<input type="button" onclick="showSpoiler4(this);" value="Sideflip Variations (ramp)" />
<input type="button" onclick="showSpoiler5(this);" value="Twists and other tricks" />
<div id="div1" class="inner" style="display:none;">
<ul>
<li>Front full</li>
<li>Double Front</li>
<li>Aerial Twist</li>
</ul>
</div>
<div id="div2" class="inner" style="display:none;">
<ul>
<li>front 180</li>
<li>Webster</li>
<li>Loser</li>
</ul>
</div>
<div id="div3" class="inner" style="display:none;">
<ul>
<li>Off-axis backtuck</li>
<li>Back Full</li>
</ul>
</div>
<div id="div4" class="inner" style="display:none;">
<ul>
<li>Tunnel flip</li>
</ul>
</div>
<div id="div5" class="inner" style="display:none;">
<ul>
<li>B-Twist</li>
<li>Grandmaster Swipe</li>
</ul>
</div>
As it is the sections in between opening which is creating the gaps.
Note, I have removed your <div class="learn"> tags as they had no closing tags so it was invalid html. I also added ids to each <div> and removed the numbered naming of the tags as, for example, <div1> is not a standard tag. Therefore your js would change to be like this:
function showSpoiler1(obj)
{
var inner = obj.parentNode.getElementById("div1");
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
An alternative to moving the buttons, you could use CSS to place them at the top. You would need to wrap the section in a <div> and set it to position:relative;. You could then set the buttons to position:absolute; and define distance from top and left of the div wrapper to set their positions at the top. However, this would require knowing their width (which could change with font size) and would be messier than I think it needs to be.

Develop Reference

JavaScript is the programming language of the Web.

how to toggle different divs with javascript - javascript

Related

URL display:none;

Remove appended element

On click show / hide content

jquery - attach/detach multiple divs onclick

How can keep format when spoiler sections are opened?

Categories

Resources