When a button is clicked, the paragraph area should display while pushing down the next button/div and the rest of the page below it. In simpler terms, clicking on the button reveals the box without overlapping other elements.
I apologize for any language barriers; I hope my explanation makes sense. (Also, no frameworks or jQuery - just plain languages ;) )
This is the code I have:
It seems like the issue was caused by using position : absolute; on the dropdown-content class, which made the element take its position without considering other elements around it, resulting in them not moving.
To solve this, I changed it to position: relative; so that other elements can adjust according to its position.
I also eliminated margin-bottom: 200px; in the show class as it created substantial gaps between your elements.
Below is the modified code snippet:
function dropDownOne() {
document.getElementById("dropdownone").classList.toggle("show");
}
function dropDownTwo() {
document.getElementById("dropdowntwo").classList.toggle("show");
}
function dropDownThree() {
document.getElementById("dropdownthree").classList.toggle("show");
}
window.onclick = function(event) {
if(!event.target.matches('.dropdownbtn')) {
let dropDowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropDowns.length; i++) {
let openDropDown = dropDowns[i];
if (openDropDown.classList.contains('show')) {
openDropDown.classList.remove('show');
}
}
}
}.dropdownbtn {
border: 0;
background-color: gray;
width: 50%;
height: 40px;
border-radius: 5px;
font-size: 15px;
color: black;
cursor: pointer;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdownbtn:hover, .dropdownbtn:focus {
background-color: blue;
color: white;
border: 1px solid white;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdown {
display: inline-block;
position: relative;
margin: 10px auto;
width: 80%;
text-align: center;
}
.dropdown:last-child {
margin-bottom: 20px;
}
.dropdown-content {
display: none;
position: relative;
right: 0;
left: 0;
background-color: blue;
width: 80vw;
margin: 0 auto;
border: 1px solid white;
border-radius: 5px;
padding: 10px;
z-index: 1;
}
.dropdown-content p {
color: white;
font-size: 15px;
display: block;
}
.show {
display: block;
} <div class="dropdown">
<button onclick="dropDownOne()" class="dropdownbtn">Who am I?</button>
<div id="dropdownone" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownTwo()" class="dropdownbtn">What are your skills?</button>
<div id="dropdowntwo" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownThree()" class="dropdownbtn">Who am I?</button>
<div id="dropdownthree" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>Recently, I created my own library to act as a nosql database on my node.js web server in place of mongodb. I came across this interesting quote: Applications that use Google's Server SDKs should not be used in end-user environments, such as on pho ...
I've encountered an issue with my report form that is linked multiple times on a page to a jQuery dialog box. To prevent cross-posting, I added a random string to the submission process. After successfully submitting the form on a single page access, ...
Help! I'm completely confused about this problem. First, I am trying to use jQuery to select an li object and then check if a certain text exists within it using the "contains" function. However, for some reason, the line with the "contains" function ...
Having trouble with a button wrapped inside a custom Navbar component. The code snippet in question is: <NavBtn> <Link href="/contact" passHref> <Button> Contact Me </Button> </Link> & ...
JSFiddle: http://jsfiddle.net/ma791nd8/1/ I'm encountering some challenges due to outdated tutorials and limited documentation, which is why I've decided to seek assistance here. After reviewing one of the examples provided, I created a jsfiddl ...
Here's an example: <button ng-disabled="!isSomethingValid() || loading || disabled" ... class="btn btn-primary"> What determines the condition for the ng-disable attribute to evaluate its expression? ...
In my Ionic 2 application, I need to limit user comments to less than 500 characters in a text area. What is the best way to implement this restriction? ...
I am facing an issue where error messages are not displaying for an empty input field, while they work perfectly fine for a textarea. The if statement for the inputName seems to be working, but the else statement is not being triggered. What could be causi ...
As I embark on the journey to expand my coding skills, I have decided to challenge myself by tackling some tasks without relying on jQuery. One particular challenge that I am currently facing involves a fixed contenteditable div. The goal is to adjust the ...
I have a project that requires me to implement material-ui. Is there a way I can adjust the width and height of the div containing the "Sign In With" text (as shown in the first image) to bring the buttons closer to the text? Transformation from this: ht ...
I am currently developing an application that requires the use of two different templating languages. The code snippet below demonstrates how I am incorporating Jade and Lodash templates: app.get('/route1', function(req, res) { res.render(&apos ...
In my layout, I have two grids: one for the header and one for the footer. In between these two grids, I am using a sidebar on the left side. Below is the JavaScript code I am using: function adjustSize() { var heights = window.innerHeight; docum ...
I'm encountering an issue with my Ajax post where I am trying to disable the button used to submit data. I've reviewed my code and it seems accurate, but the button is not getting disabled. I attempted using $("#refreshButton").attr("disabled", t ...
I have set up a websocket using Socket.io and the express 4 framework on a node.js server. Currently, I am working on implementing an authorization step for my users when they are using the websocket. Upon a user connection, a token is passed as a query ...
I am encountering an issue with my code where I seem to be creating 4 references to the same object instead of 4 unique objects. When I modify a value in groupDataArrays, the same value gets updated in groupDataArraysOfficial, groupDataArraysValid, and gro ...
I am attempting to update a database property named "Estado" using ajax. Here is the code I am using: function updateDatabaseProperty(idMarker, newState) { $.ajax ({ url: `/api/IgnicoesAPI/${idMarker}`, type: 'PUT ...
I need assistance with viewing pptx files in a web browser that have been uploaded to a specific location using .net core. (approximately 40 mb) (approximately 4 mb) While attempting to view both files using the code below, I am able to see the MonitorP ...
My nodejs express application is sending requests with an array parameter, but it's including '[]' in the query string: For example: /foo?id=1&id=3&id=5 How can I remove the square brackets '[]' from the query string? va ...
It's frustrating to constantly have to ask questions. I've been struggling to implement code on my website, but every time I try to add something new, it just doesn't work. I even tried changing the CSS names, thinking that might solve the i ...
When the screen size is 320px, I want to hide the menu. Currently, the menu is always hidden and I need to call it. It should be visible by default, but when the screen size is 320px, #main-nav needs to be called. * { box-sizing: border-box; } ...