I am looking to display a div with a slide-up effect using JavaScript (not jQuery) when clicked.
Here is the HTML code I have:
<div class="title-box"><a href="#">show text</a></div>
<div class="box"><span class="activity-title">our regions bla bla</span></div>
Please provide guidance as soon as possible.
According to the question, the solution must be implemented using pure JavaScript instead of jQuery, but there is no restriction on the use of CSS. I believe that utilizing CSS is the most effective approach since the slide effect is primarily for presentation purposes.
For a demonstration, refer to http://jsfiddle.net/L9s13nhf/
<html><head>
<style type="text/css">
#d {
height: 100px;
width: 100px;
border: 1px solid red;
margin-top: -200px;
transition: margin-top 2s;
}
#d.shown {
margin-top: 100px;
}
</style>
</head>
<body>
<button id="b">Toggle slide</button>
<div id="d">Weeeeeeee</div>
<script type="text/javascript">
var b = document.getElementById('b');
var d = document.getElementById('d');
b.addEventListener('click', function() {
d.classList.toggle('shown');
});
</script>
</body></html>
The fundamental concept involves adding a class to the element you want to animate in response to a button click event (I also advocate for using a button tag over an anchor tag for semantic reasons).
The CSS automatically adjusts the margin-top property of the sliding element to make it visible on the screen. By utilizing the transition property in the CSS, the browser animates the margin-top adjustment over a two-second period.
If you're looking to implement some interactive code, consider using the following snippet:
document.getElementById('button').onclick = (function()
{
var thisElement, interval, increment = 20,
elementId = document.getElementById('target'),
clickHandler = function()
{
thisElement = thisElement || this;
thisElement.onclick = null;
elementId = document.getElementById('target');
interval = setInterval(function()
{
elementId.style.top = (parseInt(elementId.style.top, 10) + increment) + 'px';
if (elementId.style.top === '0px' || elementId.style.top === '400px')
{
thisElement.onclick = clickHandler;
clearInterval(interval);
if (elementId.style.top === '400px')
{
elementId.style.display = 'none';
}
increment *= -1;
}
else
{
elementId.style.display = 'block';
}
},100);
};
return clickHandler;
}());
Here are the references you requested:
<div class="title-box">
<a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">click here to reveal text</a>
</div>
<div class="box" id="slideup_example" style="width:150px; height:120px; background:#f0f0f0; text-align:center;">
<span class="activity-title">information about our regions and more</span>
</div>
Check out my jsfiddle: https://jsfiddle.net/gemcodedigitalmarketing/zn5yLwh3/ I'm trying to append the text from the customText input to the canvas, but it doesn't seem to be working. Yesterday, I successfully appended td and tr to a table, so ...
For my search functionality, I am utilizing ajax jquery js. I found this useful code snippet here: However, I am facing some challenges with the following Javascript code: <script language="JavaScript" type="text/javascript"> <!-- function searc ...
Consider the array below: let array = [[1, 2], [1, 2], [3, 4], [5, 6], [2, 1]] I am looking for a way to determine the number of unique arrays in this set. Using the array above as an example, the expected result is 3. How can I achieve this? The code sn ...
Currently, I am implementing Waypoint (version 7.3.2) in my React project using React version 16. My goal is to create a scrollable list of items where each item fades out as it reaches the top of the container div. My main inquiry is how can I obtain a re ...
Seeking assistance in creating a recursive loop to continuously iterate through functions in Node.js for flow control. I have tried online tutorials but still struggling to comprehend it fully. Can anyone provide guidance or point me towards a proper tutor ...
When using a router link without an anchor tag, I am able to ctrl+click the link to open it in a new tab. However, when used with a tag (e.g., tag="td"), the ctrl+click functionality no longer works. The same issue occurs with clickable elements generated ...
It appears that the code provided is not functioning correctly with jQuery versions higher than 1.8. Can anyone offer insight on how to achieve the same functionality with newer versions? Additionally, should we be structuring our code like element.click(f ...
Recently, I've been working on a nodeJS service to fetch an OAuth token from a server. Unfortunately, I keep encountering errors when running the function below: var express = require('express') var http = require('http'); var htt ...
I can't seem to figure this out. I attempted adjusting the z-index on the iframe element, but it continues to be positioned behind the menu on this page. Lowering the z-index on various sections of the navigation menu hasn't helped either. link ...
In the context of a form, it is possible to dynamically add between 1 to n records before passing it to the controller with data. The following represents the ViewModel for the form: public class AddFieldDataViewModel { public int SampleID { get; se ...
I'm trying to create a collapsible DIV, and I found a solution on Stack Overflow. However, I'm having trouble getting it to work on my website. I created a fiddle with the full code, and it works there. But when I implement it on my site, the con ...
I've created a video slider background on my website, but I'm having trouble with the Javacript for video slider navigation. When I click on the button to change the video, nothing happens. The console is showing an error message that says "Canno ...
I am struggling to change the background color of the navbar in my PrimeReact application. I have tried adding CSS styling in various places, but nothing seems to work. All I want is to customize the background color while keeping the default PrimeReact ...
Can someone assist me, please? I'm trying to update content on a page without refreshing when a button is clicked. Currently, my approach involves using the jQuery cookie plugin to save the button's id into a cookie and then reading that value in ...
I need to retrieve a player's statistics based on the input provided by the user, and then show it. I am facing challenges in storing the retrieved data using the useEffect hook. Any suggestions for a more efficient approach? import React, { useEf ...
Here is my customized Bootstrap navbar: <div class="container-fluid bg-secondary"> <nav class="navbar utep-nav navbar-inverse navbar-expand-lg"> <button class="ut-toggler navbar-toggler ml-auto" type="button" data-toggle="collapse ...
Looking for a solution regarding an ion-modal with specific CSS settings? I previously had the following CSS: ion-modal::part(content) { width: 300px; height: 480px; } Now, I need to adjust the height based on conditions: if A, the height should be lo ...
What is the best way to prevent the modal from showing again if the user checks the checkbox and clicks the close button? function popUp() { $("#LoadModal").show() var modal = document.getElementById('LoadModal') var closeBtn = document ...
I am facing an issue with a flex-box tag cloud where the sizing is controlled from the outside. I need the tags inside to be collapsible all the way down to zero if necessary, but currently they only collapse up to 2 times their padding. https://i.sstatic ...
I have a requirement to implement a similar structure in PHP as we do with structs in C. I am aware that in PHP, we use classes for this purpose. However, I need to utilize an array of these classes for naming select tags. Below is my code snippet: <?p ...