Develop Reference

Is there a way to have multiple dropdowns on one page?

I wanted to put a lot of dropdowns on one page, and I could easily get them there. The problem is that when I click on the second one, it displays what's on the first, despite having different contents. Is there a solution for this?
Code because it wouldn't fit here:
https://jsfiddle.net/ne720zps/

Send the button that was clicked to myFunction. Get the appropriate dropdown from the button's relative position to that dropdown (the dropdown is the next element after the button in your code). Delete the duplicated IDs on the dropdown divs.
<button onclick="myFunction(this)">
and
function myFunction(button) {
// the dropdown is the next element after the button that was clicked
button.nextElementSibling.classList.toggle("show");
}

Here's a restructuring of that HTML, with ID tags removed and an example on how to target elements based on their proximity/relationship to the button.
// let the page load...
document.addEventListener('DOMContentLoaded', () => {
// assign the button click
document.querySelectorAll('.dropbtn').forEach(btn => {
btn.addEventListener('click', e => {
// first close all
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'))
// open the one you want which is CLOSEST
e.target.closest('.dropdown').querySelector('.dropdown-content').classList.add('show');
})
})
// catch the click outside
document.addEventListener('click', e => {
if (e.target.classList.contains('dropbtn')) return;
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'))
})
})
body {
background: black;
color: white;
}
.dropbtn {
background-color: #ffffff;
color: black;
padding: 10px;
font-size: 20px;
border: none;
cursor: pointer;
width: auto;
margin-bottom: 0;
font-weight: 600;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background: linear-gradient(90deg, #00ffa8, #2300ff);
color: white;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline-block;
text-align: center;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
text-align: left;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
width: 30%;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
background: white;
}
/* 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;
}
#center {
text-align: center;
}
<div class="center">
<div class="dropdown">
<button class="dropbtn">Embedded Browser</button>
<div class="dropdown-content">
<b><i>Unblocked browser that won’t show up in your history. Doesn’t work with a lot of websites, so you can mostly just search.
</i></b>
</div>
</div>
</div>
<div class="center">
<div class="dropdown">
<button class="dropbtn">Fullscreen Browser</button>
<div class="dropdown-content">
<b><i>Same as the last one, but takes up your whole screen.
</i></b>
</div>
</div>
</div>

<el-collapse> blocking my custom dropdown list

I have a custom dropdown list in the first el-collapse-item. When I expand the dropdown list, the list option is blocked by the second el-collapse-item.
<el-collapse v-if="currpage == 'edit'">
<!-- 1st tab -->
<el-collapse-item class="collapseheader" title="Contact" name="1">
<InputAutocomplete2
:items="positionlist"
:initval="cur_vendor.ContactPositionIDn2"
:placeholder="$t('Position')"
:key_field="'IDn'"
:value_field="'PositionName'"
#input="setinput_contactposition2" />
</el-collapse-item>
<!-- 2nd tab -->
<el-collapse-item class="collapseheader" title="Carrier" name="2">
<!-- Some stuff here... -->
</el-collapse-item>
</el-collapse>
<style>
.autocomplete2 {
position: relative;
}
.autocomplete2-results {
padding: 0;
margin: 5px 0;
border: 1px solid red;
border-radius: 4px;
height: 150px;
overflow: auto;
position: absolute;
background-color: white;
width: 100%;
z-index: 999;
}
.autocomplete2-result {
list-style: none;
text-align: left;
padding: 4px 2px;
cursor: pointer;
}
.autocomplete2-result:hover {
background-color: #4AAE9B;
color: white;
}
</style>
As shown in the picture above, the red border is my dropdown list options, and is being blocked by the 2nd tab. What I am trying to achieve is that the list would show on top of the 2nd tab.
I tried to play with CSS:property and CSS:z-index but no luck.
I also came across this post on StackOverflow element UI el-collapse in front if others components but there are some slight differences in our problem, hence the solution did not work for me.
Any suggestions? Thank you!
Update 1: 16-03-2022
As suggested, I have created the same problem in https://codesandbox.io/s/vue-template-forked-5oy4lw

Tooltips show / hide on click with JavaScript / CSS

Trying to make my tooltips show and hide on click. I managed to do it with the first tooltip but this doesn´t work for the others.
I know that the problem might be with the code document.getElementById but I don´t know with which code I have to replace that, so that every tooltip gets triggered one after the other when clicked.
How can I manage that all the tooltips are shown and hidden as the first one?
Thanks for your support! ;)
//Showing the tooltip on click
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.add("website-tooltiptext-visible");
});
//Removing tooltip when clicked outside tooltip container or outside tooltip itself
document.addEventListener('mouseup', function(e) {
var container = document.getElementById('test');
if (!container.contains(e.target)) {
container.classList.remove("website-tooltiptext-visible");
}
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!

This question got answered in a similar question I made.
Here the link to the question also in stackoverflow
There you will find deeper insights and possible solutions for tooltips via JavaScript or :hover pseudo class.

Header changes opacity when scrolled down

I'm trying to have my header change opacity when you scroll down say aproximatly 500px down. I'm making a single page with a header infront of a bxslider so when I scroll down the opacity should increase for the header because the text still needs to be readable.
http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/
I'd like something like this but I find it very hard to edit
I already tried to look for answers here but only thing close to this is: Header changes as you scroll down (jQuery) or Fade opacity when scrolling but the one doesn't work for me and the other is to hard to understand and change
<header class="main-header">
<img src="images/logo.png"/>
<nav>
<a id="active" href="#Platenbeurs">Platenbeurs</a>
Voorstelling
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
EDIT
Here is the css code to see that the header is actualy not opacity 1.
.main-header{ position: fixed; max-width: 1024px; width: 100%; height: 100px; padding: 1%; text-align: right; background: rgba(255,255,255,0.2); border-top: 5px solid black; border-bottom: 5px solid black; }
.main-header nav a{ color: white; text-decoration: none; opacity: 1; }

If fixed it myself...
HTML
<header class="main-header clearfix">
<img src="images/logo.svg"/>
<nav>
Platenbeurs
Voorstelling
Artiesten
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
CSS
.main-header{
position: fixed;
width: 100%;
z-index: 101;
padding: 15px;
text-align: right;
background-color: rgba(0,0,0,0.2);
border-top: 5px solid black;
}
.main-header nav a{
color: white;
text-decoration: none;
opacity: 1;
}
Javascript
$(window).scroll(function(event){
if($(document).scrollTop() > 300){
if(header.data('opacity') == 'start'){
header.data('opacity','scrolled');
header.css("background", "rgba(0,0,0,1)");
}
}else{
if(header.data('opacity') == 'scrolled'){
header.data('opacity','start');
header.css("background", "rgba(0,0,0,0.2)");
}
}
});

The opacity off the header is already 1. You can't increase the opacity, instead you can set the background color for header on scroll. Please refer the following snippet: http://jsfiddle.net/uy25hw21/

Change 'Click' function to mouseover/mouseout

I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}

When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}