Develop Reference

Swiper slider - Vertical slider not moving after last slide

What is going on here is I want to add a slider HTML with extra HTML beneath the main slider.
What is the problem?
Things are working fine because we have a mouse scroll on the desktop. As soon as you see the output on mobile device things work differently because now touch comes in the picture. after the 4th slider, you can't move the slider. but I have still content left on the page after the fourth slide.
HTML
<section class="slider-part">
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide bg-y">Slide 1</div>
<div class="swiper-slide bg-r">Slide 2</div>
<div class="swiper-slide bg-g">Slide 3</div>
<div class="swiper-slide bg-v">Slide 4</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<section class="content-part">
<div class="container-xl">
<div class="row">
<div class="col-12 pt-5 pb-5">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, rerum sint pariatur natus mollitia nesciunt. Porro sit odit veniam eos quaerat animi sint ipsam aspernatur ut repellat tenetur quibusdam, corrupti optio cupiditate quis. Ipsa sapiente explicabo quam quibusdam facere, minus fugit modi impedit illo doloremque quisquam tempore corrupti quis mollitia.
</p>
</div>
</div>
<div class="row">
<div class="col-12 pt-5 pb-5">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, rerum sint pariatur natus mollitia nesciunt. Porro sit odit veniam eos quaerat animi sint ipsam aspernatur ut repellat tenetur quibusdam, corrupti optio cupiditate quis. Ipsa sapiente explicabo quam quibusdam facere, minus fugit modi impedit illo doloremque quisquam tempore corrupti quis mollitia.
</p>
</div>
</div>
<div class="row">
<div class="col-12 pt-5 pb-5">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, rerum sint pariatur natus mollitia nesciunt. Porro sit odit veniam eos quaerat animi sint ipsam aspernatur ut repellat tenetur quibusdam, corrupti optio cupiditate quis. Ipsa sapiente explicabo quam quibusdam facere, minus fugit modi impedit illo doloremque quisquam tempore corrupti quis mollitia.
</p>
</div>
</div>
</div>
</section>
<footer>
<div class="container-xl">
<div class="row">
<div class="col-12">
<h2>I am Footer</h2>
</div>
</div>
</div>
</footer>
CSS
.mySwiper {
height: 100vh;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.bg-y {
background-color: #eccc68;
}
.bg-r {
background-color: #ff7f50;
}
.bg-g {
background-color: #a4b0be;
}
.bg-v {
background-color: #70a1ff;
}
footer {
background-color: #ffa502;
padding: 20px 0;
}
footer h2 {
color: #fff;
text-align: center;
}
body {
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
JS
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
mousewheel: true,
speed: 1000,
// simulateTouch: false,
keyboard: {
enabled: true,
},
mousewheel: {
releaseOnEdges: true,
forceToAxis: true,
sensitivity: 1,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
slideChange: function () {
setTimeout(function () {
swiper.params.mousewheel.releaseOnEdges = false;
}, 500);
},
reachEnd: function() {
setTimeout(function () {
swiper.params.mousewheel.releaseOnEdges = true;
}, 750);
}
},
});
What I want is after the slider complete. I can move things normally the same as we scroll down the normal HTML.
Right now in the mobile output, you can't move the slider after the 4th slider I think it's stuck because of slider enable so you can't see content till the footer.

CSS Scroll-snap with children nested in overflow: hidden element

Is it possible to apply scroll-snap to grand-children nested in children with overflow applied ? I can't seem to make it work.
What I aim to do is have a list of div with each a fixed height on which the viewport should snap vertically
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>
Homewer, I would also like the content to be horizontally-scrollable - as their content stretch beyond the viewport width.
They must also scroll together, so using overflow-x on each of them is not possible here.
To do so, I've wrapped the child in a scrollable-wrapper that is horizontally scrollable ( overflow-x : scroll ) and have a fixed width.
And this breaks the vertical scroll snap.
Could someone tell me if there's something I missed or if there's an alternative ?
Note : since each child have a fixed height, I would not mind using scroll-snap-points-y but it has been totally dropped on almost every browser. Is there a way to reproduce this behaviour ?
Edit : I might try this for the snap-point. It's jQuery based.
Vertical scrolling snap jQuery
Snippet
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
overflow-x: scroll;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>

Mobile friendly cards in react js

I have an array of objects which contain name and description.
Name is short and few charachters. But description may be vary in length.
I want to display this data inside Cards in my react project. I tried using react-bootstrap.
What I want to do is, I want to show cards with same height and length irrespective to the details inside it. And if space in one row is not enough for all the cards, then it should go to the next line.
I want this structure to be behaved like row-col in bootstrap.
How do I do this in react js? using react-bootstrap or any other component?

I use this:
1. Container - flex-direction: row
2. Item - max-height and width
3. Item inner - use padding or for example width: 90%. All limits and sizes define in this component. It will prevent different sizes of columns.
Here is an example
https://codepen.io/team/css-tricks/pen/EKEYob
- than define item inner with specific sizes
/ Define your component Item
and simply map through array with objects.
If you want to use react, import Bootstrap library and use their components

I used bulma during a little project I was toying with at one point and it helped me do exactly as you described.
https://bulma.io/documentation/components/card/

You can use flexbox for equal height boxes
.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
display: flex;
padding: 0.5em;
width: 33.33%;
}
.list-content {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 1em;
width: 100%;
}
.list-content p {
flex: 1 0 auto;
}
<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur optio ipsa fuga vel repudiandae impedit illum delectus nihil error animi nobis quaerat quidem, amet, praesentium aspernatur inventore numquam! Totam, dolorem inventore reprehenderit, culpa obcaecati!</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste, numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur explicabo optio ducimus officia blanditiis voluptas possimus veniam maxime!</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestiae esse dolore corporis velit fugiat ipsam tempore optio dicta. Magnam iusto facere, maxime! Praesentium quo laborum, deserunt adipisci. Ipsam officia delectus repudiandae, aperiam magnam blanditiis fuga similique.</p>
Link
</div>
</li>
</ul>

Scroll to div -sticky nav height

I've got a sticky navigation on my website. When somebody clicks on one of the navigation items it scrolls down to the relevant part of the site but currently the sticky nav is overlapping the div so it looks like it hasn't scrolled to the top of the div.
The code for the scroll looks like this:
$(".nav-kontakt").click(function() {
$('html,body').animate({
scrollTop: $("#kontakt").offset().top - $("#nav").outerHeight(true)
},
'slow');
});
});
Nav:
<div class="nav-row">
<ul class="nav-item">
<li class="nav-leistungen">Leistungen</li>
<li class="nav-philosophie">Philosophie</li>
<li class="nav-kontakt" id="last">Kontakt</li>
</ul>
</div>
Scrolling to:
<div class="container" id="kontakt">
<div class="heading-line">
<span>Kontakt</span>
</div>
</div>
as you can see I've tried to scroll - the height of #nav, but this doesn't seem to work and it still overlaps the .nav-kontakt div.
Any suggestions of what I'm doing wrong or a different apporach?

I recommend that you create a demo to help you, but first try this
var fix = 0; // type integer
var nav = $(".nav-row").outerHeight(true);
$('html,body').animate({
scrollTop: $("#"+selector).offset().top - nav - fix
}, 'slow');
Remember that the scroll will not move more than the size of the page.
Look at this example (https://jsfiddle.net/idkc/zchzb2b8/6/)
$(document).ready(function() {
$("ul.nav-item li").click(function() {
var selector = $(this).attr("data-id");
var fix = 0;
var nav = $(".nav-row").outerHeight(true);
$('html,body').animate({
scrollTop: $("#" + selector).offset().top - nav - fix
}, 'slow');
});
});
body {
margin: 0;
padding: 0;
}
.container {
border: 1px solid red;
}
.nav-row {
position: fixed;
width: 100%;
background-color: #ffffff;
margin: 0;
}
.contents {
padding-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="nav-row">
<ul class="nav-item">
<li class="nav-leistungen" data-id="content1">Leistungen</li>
<li class="nav-philosophie" data-id="content2">Philosophie</li>
<li class="nav-kontakt" data-id="content3">Kontakt</li>
<li class="nav-xxxx" data-id="content4">pppppppppppppp</li>
</ul>
</div>
<div class="contents">
<div class="container" id="content1">
<div class="heading-line">
<span>content 1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
</div>
</div>
<div class="container" id="content2">
<div class="heading-line">
<span>content 2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
</div>
</div>
<div class="container" id="content3">
<div class="heading-line">
<span>content 3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
</div>
</div>
<div class="container" id="content4">
<div class="heading-line">
<span>content 4</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
</div>
</div>
</div>
<br>
<br>
<br>
<br>

jQuery custom accordion, couldn't make it collapsible

I have a custom accordion, like jQuery UI accordion. I am also trying to make any expanded item collapsible (if it is clicked again). Something like this: https://jqueryui.com/accordion/#collapsible
But I am unable to figure out how to capture another click event on the currently expanded item. Can someone point me to the right direction?
<div class="dropdown">
<div class="style1 dropdown-link" style='background-color: rgb(75, 78, 80);'>Timecard Error Message</div>
<div class="style2 dropdown-container" style="display: none">
<div class="ExternalClassA37E015771DB4A43AFAA85E21F07E758">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
</p>
</div>
</div>
</div>
<div class="dropdown">
<div class="style1 dropdown-link" style="background-color: rgb(84, 88, 90);">Worklist Emails</div>
<div class="style2 dropdown-container" style="display: none;">
<div class="ExternalClassA7D39E7BCBCE48A791E0F84E3631CC00">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
</div>
</div>
</div>
and my jQuery is sth like below:
$(document).ready(function(){
$('div.dropdown').each(function() {
var $dropdown = $(this);
$(".dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$("div.dropdown-link").css('background-image',''); //reset the background so CSS Background takes over
$("div.dropdown-container").css('display','none');
$("div.dropdown-link").css('background-color','#54585a');
$("div.dropdown-link").css('border','none');
if($("div.dropdown-container", $dropdown).css('display','none')){
$("div.dropdown-link", $dropdown).css('background-color','#4b4e50');
$("div.dropdown-link", $dropdown).css({'border-bottom':'1px dotted white', 'border-top':'1px dotted white'});
$("div.dropdown-container", $dropdown).css('display','inline-block');
$("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/arrowdown.png")');
}else{
$("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/img/arrow.png")');
$("div.dropdown-container", $dropdown).css('display','none');
$("div.dropdown-link", $dropdown).css('background-color','#54585a');
$("div.dropdown-link", $dropdown).css('border', 'none');
}
return false;
});
});
});
Here is the jsbin: http://jsbin.com/hazaxunuwa/edit?html,css,js,output

Its not a good idea to use JavaScript for changing a lot of styles while you can do it with just css. You should only include one class on your .dropdown when it is active. Below is the sample code where I've moved all your styles to css:
$(document).ready(function(){
$('div.dropdown').each(function() {
var $dropdown = $(this);
var $dropdownLink = $dropdown.find('.dropdown-link');
$dropdownLink.click(function(e) {
e.preventDefault();
var currentBlock = $(this).closest('.dropdown');
if(currentBlock.hasClass('slide-active')) {
currentBlock.removeClass('slide-active');
} else {
$('div.dropdown').removeClass('slide-active');
currentBlock.addClass('slide-active');
}
});
});
});
.dropdown-link {
background: #54585a;
}
.dropdown-container {
display: none;
}
.slide-active .dropdown-container {
display: block;
}
.slide-active .dropdown-link {
border-bottom: 1px dotted white;
background: #4b4e50;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dropdown">
<div class="style1 dropdown-link">Timecard Error Message</div>
<div class="style2 dropdown-container">
<div class="ExternalClassA37E015771DB4A43AFAA85E21F07E758">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
</p>
</div>
</div>
</div>
<div class="dropdown">
<div class="style1 dropdown-link">Worklist Emails</div>
<div class="style2 dropdown-container">
<div class="ExternalClassA7D39E7BCBCE48A791E0F84E3631CC00">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
</div>
</div>
</div>
<div class="dropdown">
<div class="style1 dropdown-link">Unable to Enter a Future Timecard</div>
<div class="style2 dropdown-container">
<div class="ExternalClassD8605E4C12364C5685331D8368E84E8A">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
</div>
</div>
</div>

Alternatively, by making use of the index value of the .each() function, when the user clicks on a title, we loop through the content array and for the matching item we use toggleClass() to toggle the class .expand which is responsible for expanding the content section, and for each not matching item we remove this class.
jsFiddle
var titles = $('.title'),
content = $('.content');
titles.each(function(index) {
$(this).on('click', function() {
for (var i = 0; i < content.length; ++i) {
if (i == index) {
$(content[i]).toggleClass('expand');
} else {
$(content[i]).removeClass('expand');
}
}
});
});
.accord { width: 500px; outline: 1px solid #aaa; }
.title { color: white; background-color: #555; padding: 10px 5px; cursor: pointer; }
.content { max-height: 1px; overflow: hidden; }
.expand { max-height: 1000px; padding: 5px 5px 20px 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accord">
<div class="title">This is title ONE</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus debitis, ipsum at asperiores dignissimos aperiam qui. Dignissimos mollitia incidunt commodi, necessitatibus numquam corporis, ex expedita ut consequatur maiores doloremque eius.
</div>
<div class="title">This is title TWO</div>
<div class="content">Cake gummies candy canes topping donut caramels candy bear claw. Powder brownie chupa chups macaroon jelly beans chocolate chocolate jelly. Chupa chups apple pie marshmallow dessert tart apple pie cotton candy tiramisu. Fruitcake cupcake pie. Cheesecake
bear claw croissant candy tart. Liquorice cookie candy topping macaroon.
</div>
<div class="title">And here's title THREE</div>
<div class="content">Percolator, spoon half and half variety saucer caramelization qui milk. Sugar aromatic white at skinny roast redeye decaffeinated shop. Siphon spoon id, robust froth doppio redeye café au lait. So aroma, a grinder crema froth acerbic. Cultivar ristretto
carajillo turkish galão cappuccino, roast to go black body milk. Est decaffeinated seasonal coffee robust, qui sit french press single shot single origin.
</div>
</div>

Avoid styling in javascript, it would be a bad practice.
Here is the snippet of what you want.
$(document).ready(function(){
$('div.dropdown').each(function() {
var $dropdown = $(this);
$(".dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
var parent_drop = $(this).closest(".dropdown");
if($(parent_drop).is(".open")){
$(parent_drop).removeClass("open");
$("div.dropdown-container").css('display','none');
} else {
$(parent_drop).addClass("open");
$("div.dropdown-link").css('background-image',''); //reset the background so CSS Background takes over
$("div.dropdown-container").css('display','none');
$("div.dropdown-link").css('background-color','#54585a');
$("div.dropdown-link").css('border','none');
if($("div.dropdown-container", $dropdown).css('display','none')){
$("div.dropdown-link", $dropdown).css('background-color','#4b4e50');
$("div.dropdown-link", $dropdown).css({'border-bottom':'1px dotted white', 'border-top':'1px dotted white'});
$("div.dropdown-container", $dropdown).css('display','inline-block');
$("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/arrowdown.png")');
}else{
$("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/img/arrow.png")');
$("div.dropdown-container", $dropdown).css('display','none');
$("div.dropdown-link", $dropdown).css('background-color','#54585a');
$("div.dropdown-link", $dropdown).css('border', 'none');
}
}
return false;
});
});
});
.style1 {
font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
font-size: 13px;
color: #fff; line-height:22px; cursor: pointer; background-color:#5d6264; padding-left:3px; margin-left:5px;
background: url('/SiteAssets/img/gt2.png') no-repeat center left;
background-size:12px 12px;
padding-left: 15px;
}
.style2 {
font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
font-size: 13px;
border-bottom:1px dotted silver;
padding:0px 5px 5px 15px; margin-left:5px; background-color:#606567; color:#fff; display:none;
}
.style2 a{color: white !important; text-decoration:underline !important;}
.style3{
font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
font-size: 13px; font-weight:bold; color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<div class="style1 dropdown-link" style='background-color: rgb(75, 78, 80);'>Timecard Error Message</div>
<div class="style2 dropdown-container" style="display: none">
<div class="ExternalClassA37E015771DB4A43AFAA85E21F07E758">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
</p>
</div>
</div>
</div>
<div class="dropdown">
<div class="style1 dropdown-link" style="background-color: rgb(84, 88, 90);">Worklist Emails</div>
<div class="style2 dropdown-container" style="display: none;">
<div class="ExternalClassA7D39E7BCBCE48A791E0F84E3631CC00">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
</div>
</div>
</div>