What is the best way to have a div gradually glide out (utilizing CSS's transition feature) upon the click of a particular button?

I want the hint-bubble div to smoothly slide out (using 'transition: 0.5s') whenever the hint-btn is clicked. I have successfully implemented it so that the hint-bubble appears when the button is clicked, but it appears instantly and I am struggling to slow down the transition.

HTML:

<body>
            <div class="hints">
                <p>Need assistance?</p>
                <br>
                <p>Click the button below for some hints!<p>
                <button class="hint-btn">Hints</button>
            </div>
            <div class="hint-bubble">I'd like this div to slide out when the "Hints" button is clicked</div>
        </div>
</body>

CSS:

.hints {
    right: 28rem;
    bottom: 33.4rem;
    border: 1px solid black;
    background-color: #707070;
    color: white;
    box-shadow: 0px 0px 1px 1px black;
    border-radius: 3px;
}

.hints p:first-child {
    padding-bottom: 0.4rem;
    border-bottom: 3px solid #a6a4a4;   
    margin-bottom: -1rem;
}
.hints p:nth-child(3) {
    font-size: 0.7rem;
}
.hint-btn {
    font-family: 'Montserrat', sans-serif;
    background: none;
    width: 3rem;
    font-size: 0.75rem;
    border-radius: 4px;
    border: 1px solid #595656;
    background-color: #F47B13;
    color: white;
    box-shadow: 0px 0px 1px #F47B13;
    outline: none;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
.hint-btn:hover {
    background: #c76410;
    transition: 0.4s;
}
.hint-btn:active {
    background: #f2b683;
    transition: 0.6s ease-in-out;
}
.hint-bubble {
    width: 15.6rem;
    padding: 0.2rem;
    text-align: center;
    color: white;
    background-color: #707070;
    font-size: 0.8rem;
    border-radius: 3px;
    box-shadow: 0px 0px 1px 1px black;
    padding: 0.7rem;
    transition: 0.8s;
    
    right: 28rem;
    bottom: 32.5rem;
    display: none;
}
.hint-bubble:before {
  position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 0.8rem solid #707070;
    right: 7.2rem;
    top: -1.3rem;
}

Javascript:

const btnHint = document.querySelector(".hint-btn");
const hintBubble  = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;

btnHint.addEventListener("click", () => {
    if (isOn) {
        hintBubble.style.display = "none";
        isOn = false;
    } else {
        hintBubble.style.display = "unset";
        isOn = true;
    }
});

You can view it on codepen as well: https://codepen.io/gchib00/pen/ExNrvrR

javascripthtmlcss

Answer №1

Don't rely on the display property to smoothly transition visibility of elements,
instead, utilize opacity and pointer-events: none to maintain clickability

You can streamline toggling with classList.toggle to simplify your code and separate styles from the script for easier management

const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");

btnHint.addEventListener("click", () => {

  hintBubble.classList.toggle("shown")

});
.hints {
  // CSS styling for hints container
  ...
}

// More CSS rules for different elements within the hints container

.hint-btn {
  // Styles for the hint button
  ...
}

// Additional styles for the hint bubble

.hint-bubble {
  // CSS properties for the hint bubble
  ...
}

... // more CSS code 


<div class="hints">
  <p>Need help?</p>
  <br />
  <p>Click button below to get some hints!</p>
  <button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>

Learn more:

Answer №2

element provides valuable information on how to effectively utilize the CSS properties of opacity and visibility instead of using transition with the display rule. It also suggests modifying the default attributes of the .hint-bubble selector in the CSS file by adding visibility: hidden and opacity: 0, while removing display: none. Furthermore, it emphasizes the importance of reviewing the JavaScript code snippet provided to ensure smooth functionality. The code snippet includes event listeners for button clicks, toggling the visibility and opacity of a hint bubble. Additionally, the CSS styling for elements like .hints, .hint-btn, and .hint-bubble is detailed within the answer, along with specific design choices such as color schemes, box shadows, and transitions. Overall, the guidance offered in this response aims to optimize the user experience by enhancing the visual and interactive elements of the webpage through strategic CSS and JavaScript implementations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the issue of being unable to connect to the NodeJS express server from any network?

Imagine having a web server running on port 3001 with the IP address 23.512.531.56 (obviously not a real one) and then switching to another network, like your neighbor's. Now, when you try entering 23.512.531.56:3001 in Chrome, why doesn't the se ...

javascriptnode.jsexpressnetworkingip

Stylish CSS for your website's navigation

I am facing a challenge with creating a menu for my website. I want it to be positioned on the left side, similar to the image provided below. However, despite writing the code and applying styles as expected, the menu does not display correctly and appear ...

htmlcssnavbar

In React, when a user clicks the back button on the browser window, ensure you pass props back to the originating component

While moving from component A to component B through routing, I want to send a prop back to A when the user clicks on the browser's back button while on B. Can this be achieved? I am currently using React's history.push for navigating between com ...

javascriptreactjsroutesurl-routingreact-props

The PNG image keeps getting cropped

The bottom of a PNG image is being cropped off. View the picture illustrating the issue .loadMoreBtn-label { background-image: url(picture); background-repeat: no-repeat; padding-left: 30px; background-size: 23px 23px; background-posit ...

htmlcssimage

What causes the immediate firing of the DOM callback in Angular 1.2.9?

Check out a live demo here View the source code on GitHub here Angular 1.2.9 brought in DOM callbacks with the introduction of $animate:before and $animate:after events triggered during animations. However, it seems that the $animate:after event is trigg ...

javascriptangularjsanimation

Utilizing Regex Patterns to Manipulate CSS Attributes

I am dealing with a string containing CSS properties and their values: str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background: -webkit-linear-gradient(top, black, wh ...

javascriptcssregex

Submit data in the manner of a curl request

Instead of using a curl command to push a file to a web server, I am attempting to create a simple webpage where I can select the file and submit it. Here is the HTML and JavaScript code I have written for this purpose: <html> <body> <i ...

javascripthtmlcurlboost-asio

New design for UI grid: eliminate sorting menu and right-align column headers

I came across a question similar to this one My goal is to eliminate the dropdown menu from the column headers and align the text of the headers to the right. .ui-grid-header-cell { text-align: right; } However, my current attempts result in the disap ...

htmlcssangularjsangular-ui-grid

Using Bootstrap to embed YouTube videos results in a sleek, modern design with distinctive black

When my screen is maximized on Chrome, I notice irritating black lines appearing on my responsive Youtube embeds. Unfortunately, I am unable to post an image due to lack of reputation. Specifically, when the video is paused, there is a slim black line at ...

htmlcsstwitter-bootstrapyoutube

Divide the string into segments and set up pagination

<div><p class="pagi">page 1 content</p><p class="pagi">page 2 content</p><p class="pagi">page 3 content</p></div> I am currently facing a challenge with the string provided above. I need to create pagination ...

javascriptjqueryhtml

Maya model being loaded using Three.js

I've been following a tutorial on how to load Maya models using Three.js, which you can find here. Everything is going smoothly, but the tutorial only covers loading models with a single texture. Below is the source code snippet from the tutorial: ...

javascripthtmlthree.jswebglmaya

Exploring the process of iterating through JSON data using JSON.parse

After making a request to my Django server for data, I utilized JSON.parse to convert the data into a JSON object. My goal is to iterate through each attribute of the object's field and execute the function createDiv on each one. function load_blog( ...

javascriptjsonajaxapidjango-models

Learn how to include the srcObject attribute of a video tag and then dynamically inject it into an HTML page using JavaScript or jQuery

media stream object inside console and this is what I am seeing after setting the source attribute The following function is part of my client-side script. I am working on a project that involves WebRTC and this function is called whenever I need to add a ...

jqueryhtmlnode.js

How can PHP send a variety of error messages to an Ajax/Jquery script and display them in an HTML DIV?

In an attempt to send various error messages back to an HTML DIV based on the PHP outcome, I have scoured through different resources without a solution that fits my particular case. Hopefully, someone can provide assistance with this. The scenario involv ...

phpjqueryhtmlajaxjson

Encountering a problem sending an array of objects to a controller via jQuery AJAX

I attempted to send an array of objects to a controller using jQuery Ajax, but I am getting a null result in ASP.NET 5.0. The data array that I'm sending is named regions. The constructor for the data is defined in the BoundingBoxModel class. Here i ...

javascriptjqueryasp.netjsonajax

The parent container is not properly wrapping its content in Internet Explorer only

Check out this code snippet I have here: https://jsfiddle.net/kimwild/mtxgtwr5/2/ main#wrapper { z-index: 1; width: 100%; position: relative; overflow: hidden; background-color: red !important; border: 10px dotted #4D37DB; } figure#about-im ...

csshtmlinternet-explorerinternet-explorer-11

Difficulty altering value in dropdown using onChange function - Material-UI Select in React app

Having trouble updating dropdown values with MUI's Select component. The value doesn't change when I use the onChange handler, it always stays the same even after selecting a new item from the dropdown. I made a functional example on CodeSanbox. ...

javascriptreactjsmaterial-ui

Guide on leveraging a private GitHub repository as a yarn dependency without installing internal dependencies

Recently, I have been attempting to incorporate a private GitHub repository as a dependency within multiple repositories at my workplace. Within the primary package.json file, our dependency is outlined as follows: "mycompany-models": "https://github.com ...

javascriptnode.jsgithubnpmecmascript-6

I am looking to edit specific lines of HTML code on a website in order to automatically select a checkbox. Is this possible?

I'm currently attempting to automate the process of increasing bids on a particular website every two hours. However, the site requires users to manually select checkboxes next to the lots they want to raise their offers on. The issue is that the che ...

pythonhtmlseleniumparsingbeautifulsoup

Leveraging partials on their own

I am currently exploring the possibility of loading a partial in linkedin-dustjs without having to load its parent along with it. For instance, consider this partial (login.dust): {>layout/} {<content} <!-- Login Screen --> {/content} Th ...

javascriptnode.jsexpressdust.js