I am new to coding and I want to have like these panels on the bottom of the page that when pressed it opens some menu with buttons and stuff and I think the best choice would be collapside. But after reading the W3schools tutorial I didn´t find any reference on how to make them open pointing up. I hope it just don´t move the whole page and just opens a clickable window. If not I would like to know which other thing to use for that. Here is the code from W3schools
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Animated Collapsibles</h2>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>upper one (only one is enought).</p>
</div>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
<p>1.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
<p>2.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>3.</p>
</div>
</body>
</html>
You should set your content variable to previousElementSibling to get the element before.
var content = this.previousElementSibling;
Then, swap the order of the collapse button and content like so:
<div class="content">
<p>upper one (only one is enought).</p>
</div>
<button class="collapsible">Open Collapsible</button>
JSFiddle: https://jsfiddle.net/gf72yw8q/
The reason they open downwards is because the html structure and css is indicating for it to be that way, for example:
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>upper one (only one is enought).</p>
</div>
The <p> with the text "upper one" (in this case your content) appears after open <button>.
If you want it to open upwards, the content would thus need to appear (in the html) before the button (to avoid using additional css styles to reproduce the intended effect).
for example:
<ul class="magic-content">
<li>an example list item</li>
<li>another example item</li>
</ul>
<a class="magic-button" href="#">my magic button</a>
to make this work, you would then need something like this inside your js file. For the purpose of this example, I am using jquery:
//FILTERS RESET
$('.magic-button').click(function(event) {
event.preventDefault;
$('.magic-content').toggleClass('on');
});
And your css would need to have something such as:
.magic-content {display:none;}
.magic-content.on {display:block;}
So that the toggling of the class 'on' is what triggers the showing/hiding of the content.
ALTERNATIVELY, the example you are referring to can be found here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_class_crossbrowser
And all you need to do in their example to reverse the order is change the order of the html elements:
<div id="myDIV">
This is a DIV element.
</div>
<button onclick="myFunction()">Try it</button>
The button after the content. I hope this helps.
G
Related
I'm trying to understand how this sort of dropdown list could be produced, possibly without Js.
To be more clear, I'm trying to make something like this:
<Clickable Text Subject Name>
<Hidden Description>
<Clickable Text Subject Name>
<Hidden Description>
<Clickable Text Subject Name>
<Hidden Description>
Whereby the "Hidden Description" shifts the elements below it, when the subject is clicked.
Also, when trying to add more than one dropdown text element, with my attempt, they are placed horizontally
My attempt:
.dropbtn {
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown">
<p class="dropbtn">Subject name1</p>
<div class="dropdown-content">
<p>The subject description in all it's glory</p>
</div>
</div>
If you have any ideas, please let me know, thanks!
<script>
let isOpen = false;
function something() {
isOpen = !isOpen;
let result = isOpen ? 'block':'none'
document.getElementById("dropdown").style.display = result;
}
</script>
<div class="dropdown">
<button class="dropDownButton" onclick="something()">DROPDOWN</button>
<div class="dropDownContent" id="dropdown">
Lorem ipsum dolor sit amet.
</div>
</div>
I ended up modifying the given example of collapsible elements, so I could get what I was looking for. Here's what I'm using, based on the link I tried to provide
<html>
<head>
<script>
function ToggleDesc(ref){
var content = ref.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
}
</script>
<style>
.subject {
border: none;
text-align: left;
font-size: 25px;
width: 100%;
cursor: pointer;
}
.desc {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button type="button" class="subject" onClick="ToggleDesc(this)">Subject 1</button>
<a class="desc">A very descriptive description</a>
<button type="button" class="subject" onClick="ToggleDesc(this)">Subject 2</button>
<a class="desc">A very descriptive description</a>
</body>
</html>
I have a wordpress site with this image boxes
each box is an event, this events have tags ,also reflectes in a class, what i need to do is all the elements with an specific class ("free" in this case) to have a little non clickable button or a text with a background that says "Free" in the upper corner of the box, no, this boxes are generated with a plugin and its just a shortcode, so i cannot directly change the html, so i tried doing it with just css and javascript
This is a single Event with the tag (named "tag-gratis")
<article id="post-9072" class="regular post-9072 post type-post status-
publish format-standard has-post-thumbnail category-eventos185 tag-
culturales tag-fuera-del-barrio tag-gratis">
<div class="inner-wrap animated">
<div class="post-content">
<div class="content-inner">
<span
class="post-featured-img" style="background-image:
url(https://vivirenuevacba.com/wp-content/uploads/2019/01/genaro_perez_7-
800x589.jpg);"></span>
<div class="article-content-
wrap">
<span class="meta-
category"><a class="eventos185"
href="https://vivirenuevacba.com/category/eventos185/">EVENTOS</a></span>
<div class="post-
header">
<h3
class="title">
<a href="https://vivirenuevacba.com/museo-genaro-perez/">
Museo Genaro Pérez
</a>
</h3>
<span
class="meta-author"><span>By</span> <a
href="https://vivirenuevacba.com/author/Vics/" title="Entradas de Vics"
rel="author">Vics</a></span> <span class="meta-category">| EVENTOS</span>
</div><!--/post-header-->
</div><!--article-content-wrap-
->
</div><!--/content-inner-->
</div><!--/post-content-->
</div><!--/inner-wrap-->
</article><!--/article-->
Here is a simple button that i did with css
.button {
margin-top: 20px;
line-height: 60px;
font-weight: bold;
padding: 0 40px;
background: salmon;
border: none;
}
and here is my javascript
document.addEventListener('DOMContentLoaded', function() {
$(function() {
$('.tag-gratis').each(function() {
var button = document.createElement("button");
button.innerHTML = "GRATIS";
var body = document.getElementsByClassName(".tag-gratis");
body.appendChild(button);
});
});
});
</script>
Now the button doesnt appear and i just get a
"Uncaught TypeError: body.appendChild is not a function"
I don't think there is any need to use JavaScript here. A simple pseudo element would suffice.
.tag-gratis {
position: relative;
}
.tag-gratis img {
width: 100%;
}
.tag-gratis::after {
content: "FREE";
position: absolute;
top: 20px;
right: 20px;
padding: 5px 10px;
background: salmon;
color: white;
}
<article class="tag-gratis">
<img src="//placehold.it/300x150">
</article>
Since document.getElementsByClassName is a collection you need to pass the index to get th element
Try this
document.getElementsByClassName(".tag-gratis")
So disclaimer, I already found the answer to this but I'm posting it as a question in case it helps somebody else.
Scenario: Inside a form in the page you have a couple of accordions so that the user can collapse the parts they already looked at. If you follow most examples expanding the accordions will actually auto submit the form, no bueno.
<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<form action="fail" method="post" enctype="multipart/form-data">
<button class="accordion">Section 1</button>
<div class="panel">
<input type="checkbox" name="checkbox1.1">Checkbox 1.1
<br>
<input type="checkbox" name="checkbox1.2">Checkbox 1.2
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<input type="checkbox" name="checkbox2.1">Checkbox 1.1
<br>
<input type="checkbox" name="checkbox2.2">Checkbox 1.2
</div>
<input type="submit" value="Submit">
</form>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
Essentially the buttons for the accordion are being treated as submit buttons even though we already have a submit button. In order to override this behavior simply declare the button type as button:
<button type="button" class="accordion">Section 1</button>
<button type="button" class="accordion">Section 2</button>
This may be obvious to some but given that I rarely deal with web stuff this was a very frustrating side affect to find and work around so I hope it helps somebody else.
I'm not to familiar with JavaScript and I was hoping to get a little help with a problem I can't seem to fix. I currently have 2 Drop Down Menus on my website. One is a drop down menu for the navigation which is activated when clicking a hamburger menu icon. The second drop down is being used to show categories on my website. Currently when I click one drop down, I have to click it again in order to close it. If I click the second drop down without closing the first both will remain visible. What I would like to happen is two things. First I would like it so that if a user clicks anywhere outside of the div for the drop down menu it automatically closes. The second thing I would like to see happen is only have one drop down menu visible at a time. So if I click one and another drop down is open I want it to be closed. Hopefully I explained this well. Now onto the code I'm using.
The following is within my head.
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function DropDownMenuNavigation() {
document.getElementById("b2DropDownMenuNav").classList.toggle("show");
}
function DropDownMenuCategory() {
document.getElementById("b2DropDownMenuCat").classList.toggle("show");
}
</script>
Then I use this as the button to activate the navigation drop down menu. This is included within my body.
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuNavigation()" class="dropbtn">☰ MENU</button>
</div>
and this what I use to include my category drop down menu.
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button>
</div>
Now lastly is the css I use just on the off chance that helps any.
/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
float: left;
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000000;
text-decoration: none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
So what would be the best method to go about doing what I'm asking? Could someone maybe lend me a hand and point me in the right direction. Thanks a lot and I appreciate any help you could lend me.
The onclick attribute shouldn’t include the (). It should look like this:
<button onclick="DropDownMenuNavigation" class="dropbtn">☰ MENU</button>
Or—even better—don’t put the event listener inline, put it in the script.
Also, remove the “show” class from the other dropdown when the button is pressed.
See here:
document.getElementById('menudropbtn').addEventListener('click', function () {
document.getElementById('b2DropDownMenuNav').classList.toggle('show')
document.getElementById('b2DropDownMenuCat').classList.remove('show')
})
document.getElementById('categoriesdropbtn').addEventListener('click', function () {
document.getElementById('b2DropDownMenuCat').classList.toggle('show')
document.getElementById('b2DropDownMenuNav').classList.remove('show')
})
/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
float: left;
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000000;
text-decoration: none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
<div class="dropbtn" style="float: left;">
<button class="dropbtn" id="menudropbtn">☰ MENU</button>
<div class="dropdown">
<div class="dropdown-content" id="b2DropDownMenuNav">
<a>Something</a>
</div>
</div>
</div>
<div class="dropbtn" style="float: left;">
<button class="dropbtn" id="categoriesdropbtn">CATEGORIES</button>
<div class="dropdown">
<div class="dropdown-content" id="b2DropDownMenuCat">
<a>Something else</a>
</div>
</div>
</div>
To do this, you can add custom JS functions that will open dropdowns based on element ID, and when one dropdown is opened, all others will be closed. You can create a function that closes all the dropdowns. Then, in your "open" function, call the "close_all" function first.
Here's a working snippet.
// Functions for Interactive File Menu Bar
// - Click Butoon to Open Dropdown
// - Clicking one dropdown closes all other
// - Clicking outside the file menu bar will close all the dropdown.
function open_dropdown(element_id) {
console.log('Opening Dropdown:', element_id)
close_all_dropdowns()
document.getElementById(element_id).style.display = 'block';
}
// Close the dropdown if the user clicks outside of it
function close_dropdown(element) {
console.log('I am closing dropdown:', element)
element.style.display = 'none'
}
// Close all dropdowns.
function close_all_dropdowns() {
var dropdowns = document.getElementsByClassName('dropdown-content')
for (var i = 0; i < dropdowns.length; i++) {
close_dropdown(dropdowns[i]);
}
}
// Close all dropdowns when clicking outside.
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
close_all_dropdowns()
}
}
/* Styles for the File Menu Bar. */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/98.css">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>RetroNet</title>
</head>
<body>
<div class="window" style="width: 100%">
<div class="title-bar">
<div class="title-bar-text">Welcome to RetroNet!</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<!-- Main menu -->
<div class="window-body">
<div class="dropdown">
<button class="dropbtn" onclick="open_dropdown('dd_file')">File</button>
<div class="dropdown-content" id="dd_file">
Open
Close
Settings
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="open_dropdown('dd_edit')">Edit</button>
<div class="dropdown-content" id="dd_edit">
Cut
Copy
Paste
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="open_dropdown('dd_view')">View</button>
<div class="dropdown-content" id="dd_view">
Toggle CSS
Toggle Javascript
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="open_dropdown('dd_tools')">Tools</button>
<div class="dropdown-content" id="dd_tools">
Not Decided
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="open_dropdown('dd_favorite')">Favourties</button>
<div class="dropdown-content" id="dd_favorite">
Add New Favorite
Add this Page to Favorites
Show Favorites
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="open_dropdown('dd_help')">Help</button>
<div class="dropdown-content" id="dd_help">
README
</div>
</div>
</div>
</div>
</body>
</html>
Maybe the following code can help. You can use custom event to have module items (like menu, popup or such) communicate to each other.
If a menu button is clicked then you can dispatch a custom event. Any other item on the page may do something according to what this event is (like pausing a game when a main menu is opened).
// find menu-content in item (=menu-button) and return
// "none" if menu-content.style.display is "block"
// "block" if menu-content.style.display is not "block"
const toggle =
(item) => {
const content =
item.querySelector("[x-role=\"menu-content\"]");
return content.style.display === "block"
? "none"
: "block"
}
;
// set menu-content found in item (=menu-button) to
// none or block
const changeDisplay =
(item,display) =>
item.querySelector("[x-role=\"menu-content\"]")
.style.display = display;
// when menu-button is clicked
const menuButtonClicked =
e => {
//get the toggled content style
// if current style is block then
// toggled is none and vice versa
const style = toggle(e.target);
//hide all menus, in the for each we
// added an event listener for "menu-click" event
// the listener will hide the menu
var evt = new Event("menu-click",{});
document.body.dispatchEvent(evt);
//set style of the current
changeDisplay(e.target,style);
}
;
//for each menu-botton role
// I am not using css selectors on class, class is for style,
// user defined properties can be used for behavior.
// If you mix this up then you can break style, behavior
// or both when changing behavior or style
document.querySelectorAll("[x-role=\"menu-button\"]")
.forEach(
x => {
//when clicked let menuButtonClicked handle it
x.addEventListener(
"click"
,menuButtonClicked
);
//listen to custom event called "menu-click"
// set display to none when this happens
// if you were to dynamically add and remove
// menu items then you should remove the event
// listeners when you remove the menu
document.body.addEventListener(
"menu-click"
,e => changeDisplay(x,"none")
);
}
)
;
.menu-button {
cursor: pointer;
}
.menu-content {
display:none;
}
<div class="menu-button" x-role="menu-button">
menu1
<div class="menu-content" x-role="menu-content">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
</div>
<div class="menu-button" x-role="menu-button">
menu2
<div class="menu-content" x-role="menu-content">
<ul>
<li>three</li>
<li>four</li>
</ul>
</div>
</div>
<div class="menu-button" x-role="menu-button">
menu3
<div class="menu-content" x-role="menu-content">
<ul>
<li>five</li>
<li>six</li>
</ul>
</div>
</div>
I am using this accordion menu.
JavaScript:
var acc = document.getElementsByClassName("accordion"), i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
Html:
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
</style>
</head>
<body>
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 3</button>
<div id="foo" class="panel">
<p>
<button class="accordion">Section 3</button>
<div id="foo" class="panel">
<p></p>
</div>
</p>
</div>
</body>
</html>
I need to use the second menu in section 3. I add in this accordion menu to another accordion menu but it does not open. Any ideas why? How can I solve this problem?
In the following HTML structure, I'm replacing P tag with DIV tag. The P element cannot contain block level elements like DIV.
Ref: How can I put DIV in P? and P tag
<body>
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 3</button>
<div id="foo" class="panel">
<div>
<button class="accordion">Section 3</button>
<div id="foo" class="panel">
<div>
test
</div>
</div>
</div>
</div>
</body>
The click event didn't work for your original HTML structure, as the browser altered the DOM elements and DIV element was removed from inside of P tag(explained the reason with the above reference links). This DOM change has resulted in an issue while we retrieve nextElementSibling.
Accept this answer if it solves your issue.