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.
Related
I'm new to creating webpage. I was stuck in this part, where there are three link (should be visible) and three textbox(should be invisible) as default .
When I click one link only that respective text field should visible. if I click another link previous field should hide and it's respective text field should be visible.
Example
If click student link the respective student div should visible then if I click parent then previously student div should hide and parent div must visible.
This is my sample code.
<div>
<ul class="role" id="role">
<li class="selected">
student
</li>
< li>|</li>
<li class="">
teacher
</li>
<li>|</li>
<li class="">
parent
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud">
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach">
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par">
</div>
I think this is what you want.
var student = document.getElementById("student_tab");
var teacher = document.getElementById("teacher_tab");
var parent = document.getElementById("parent_tab");
var b_Stud = document.getElementById("Stud");
var b_Teach = document.getElementById("Teach");
var b_par = document.getElementById("par");
function clear() {
b_Stud.style.display = "none";
b_Teach.style.display = "none";
b_par.style.display = "none";
}
function show(type) {
switch (type) {
case "student_tab":
b_Stud.style.display = "block";
break;
case "teacher_tab":
b_Teach.style.display = "block";
break;
case "parent_tab":
b_par.style.display = "block";
break;
default:
break;
}
}
student.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
teacher.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
parent.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
<div>
<ul class="role" id="role">
<li class="selected">
student
</li>
<li class="">
teacher
</li>
<li class="">
parent
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud" placeholder="Stud" />
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach" placeholder="Teach" />
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par" placeholder="par" />
</div>
Check this out.
const studentInput = document.getElementById("Stud");
const teacherInput = document.getElementById("Teach");
const parentInput = document.getElementById("par");
const links = document.querySelectorAll('a');
const hideInputs = () => {
const inputs = document.querySelectorAll('input');
inputs.forEach(input => input.classList.remove("active"));
}
const showElement = (e) => {
if(e.target.textContent === "parent") {
hideInputs();
parentInput.classList.add("active");
} else if(e.target.textContent === "student") {
hideInputs();
studentInput.classList.add("active");
} else if(e.target.textContent === "teacher") {
hideInputs();
teacherInput.classList.add("active");
}
}
links.forEach(link => link.addEventListener('click', (e) => showElement(e)))
input {
display: none;
}
input.active {
display: block;
}
<div>
<ul class="role" id="role">
<li class="selected">
student
</li>
<li class="">
teacher
</li>
<li class="">
parent
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud" placeholder="student" class="active">
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach" placeholder="teacher">
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par" placeholder="parent">
</div>
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>
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>
I have built a tab bar website that only uses one page I am using js to hide 3 elements and show one. When I click the links to show one and hide the others everything is messing up and 3 are shown or 2 it's random. Here is my code.
function unhide(divID, otherDivId, otherDivId, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
.hidden {
display: none;
}
.unhidden {
display: block;
}
<div id="tweaked" class="hidden">
<p>Test1</p>
<footer class="bottom">
<a class="tab current" href="javascript:unhide('home', 'tweaked', 'other', 'more')">Home<i class="material-icons">home</i></a>
<a class="tab" href="javascript:unhide('tweaked', 'home', 'other', 'more')">Tweaks<i class="material-icons">view_headline</i></a>
<a class="tab" href="javascript:unhide('other', 'home', 'tweaked', 'more')">Other<i class="material-icons">view_headline</i></a>
<a class="tab" href="javascript:unhide('more', 'tweaked', 'other', 'more')">More<i class="material-icons">share</i></a>
</footer>
</div>
Perhaps you want something like this:
var anchors = document.querySelectorAll(".bottom .tab"),
showHide = function(e) {
var parent = this.parentNode;
anchors.forEach(a => {
var relatedDiv = document.getElementById(a.dataset.tab),
aClass = a.className.trim();
if (a.dataset.tab != this.dataset.tab) {
relatedDiv.className = relatedDiv.className.replace("unhidden", "") + " hidden";
a.className = aClass.replace("current", "");
} else {
relatedDiv.className = relatedDiv.className.replace("hidden", "") + " unhidden";
a.className = aClass.replace("current", "") + " current";
}
});
};
anchors.forEach(a => a.addEventListener("click", showHide));
.hidden{
display:none;
}
.unhidden{
display:block;
}
<div id="home" class="unhidden">
<p>Home</p>
</div>
<div id="tweaked" class="hidden">
<p>Tweaks</p>
</div>
<div id="other" class="hidden">
<p>Other</p>
</div>
<div id="more" class="hidden">
<p>More</p>
</div>
<footer class="bottom">
<a class="tab current" href="#" data-tab="home">Home<i class="material-icons">home</i></a>
<a class="tab" href="#" data-tab="tweaked">Tweaks<i class="material-icons">view_headline</i></a>
<a class="tab" href="#" data-tab="other">Other<i class="material-icons">view_headline</i></a>
<a class="tab" href="#" data-tab="more">More<i class="material-icons">share</i></a>
</footer>
Have you tried item.classList ?
Element.classList | MDN
You could try something like this:
if(item.classList.contains("hidden")){
item.classList.remove("hidden");
item.classList.add("unhidden");
}else{
item.classList.add("hidden");
item.classList.remove("unhidden");
}
I am trying to develop a drop down menu. I have written html code and javascript for two buttons, but I am wondering how to link the second button to javascript. Do I need to write another function()?
<div class="dropmenu">
<button onclick="myFunction()" class="button1" style="background-color:#61117F ;">Dropdown</button>
<div id="Dropdown1" class="dropmenu-content">
Apple
google
</div>
</div>
<div class="dropmenu">
<button onclick="myFunction()" class="button1" style="background-color:#d7791b ;">DropDown2</button>
<div id="Dropdown2" class="dropmenu-content">
Yahoo
FB
</div>
</div>
<script>
function myFunction() {
document.getElementById("Dropdown1").classList.toggle("show");
window.onclick = function(event) {
if (!event.target.matches('.button1')) {
var drop = document.getElementsByClassName("dropmenu-content");
var i;
for (i = 0; i < drop.length; i++) {
var Dropdown = drop[i];
if (Dropdown.classList.contains('show')) {
Dropdown.classList.remove('show');
}
}}}
</script>
You could give your button a data-attribute with the id of the dropdown you want to affect and a css class of something like "trigger-event" to fire the event
<button data-dropdown="Dropdown1" class="trigger-event" style="...">
...
<button data-dropdown="Dropdown2" class="trigger-event" style="...">
and use the data attribute to retrieve the dropdown
$(document).on('click', '.trigger-event', function(){
var dropdownId = $(this).data("dropdown");//or attr("data-dropdown")
myFunction(dropdownId);
});
function myFunction(dropdownId) {
document.getElementById(dropdownId).classList.toggle("show");
window.onclick = function(event) {
...
}
}
Your JavaScript can be simplified a lot. Just pass the clicked button to the function and then find it's sibling with the class dropmenu-content. After you have that, all you need to do is toggle the show class.
window.myFunction = function(e) {
var dropdown = e.parentNode.getElementsByClassName('dropmenu-content')[0];
dropdown.classList.toggle('show');
}
.dropmenu-content {
display: none;
}
.dropmenu-content.show {
display: block;
}
<div class="dropmenu">
<button onclick="myFunction(this);" class="button1" style="background-color:#61117F ;">Dropdown</button>
<div id="Dropdown1" class="dropmenu-content">
Apple
google
</div>
</div>
<div class="dropmenu">
<button onclick="myFunction(this);" class="button1" style="background-color:#d7791b ;">DropDown2</button>
<div id="Dropdown2" class="dropmenu-content">
Yahoo
FB
</div>
</div>
function myFunction(dr){
var vis = document.getElementById(dr).style.display == "block" ? "none" : "block";
document.getElementById(dr).style.display = vis;
}
.button1{
border:none;
border-radius:5px;
padding:10px;
color:white;
margin:5px;
}
.dropmenu-content{
margin:10px;
}
.dropmenu-content a{
text-decoration:none;
color:brown;
box-shadow:1px 1px #ccc;
padding:5px;
border-left:solid 3px green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropmenu">
<button onclick="myFunction('Dropdown1')" class="button1" style="background-color:#61117F ;">Dropdown1 ▼</button>
<div id="Dropdown1" style='display:none;' class="dropmenu-content">
Apple
google
</div>
</div>
<div class="dropmenu">
<button onclick="myFunction('Dropdown2')" class="button1" style="background-color:#d7791b ;">DropDown2 ▼</button>
<div id="Dropdown2" style='display:none;' class="dropmenu-content">
Yahoo
FB
</div>
</div>