I have a carousel which has next and previous buttons as well as clickable indicator "blobs" to show which image is currently visible. It's built using only CSS and radio inputs with labels. (see https://tailwind-elements.com/docs/standard/components/carousel/ for my starting point).
document.querySelectorAll('.carousel').forEach((carousel) => {
animate_carousel(carousel);
carousel.querySelectorAll("input[type='radio']").forEach((input) => {
input.addEventListener('change', function() {
animate_carousel(carousel);
});
});
});
function animate_carousel(carousel) {
setTimeout(function() {
let radio = carousel.querySelector('input[type="radio"]:checked');
let next = carousel.querySelector('label.control-' + parseInt(radio.dataset.index, 10) + '.next');
carousel.querySelector('input#' + next.getAttribute('for')).click();
animate_carousel(carousel);
}, 5000, carousel);
}
.carousel-open:checked+.carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease;
transition: opacity 0.6s ease;
}
[id^="carousel-"][id$="-0"]:checked~.control-0,
[id^="carousel-"][id$="-1"]:checked~.control-1,
[id^="carousel-"][id$="-2"]:checked~.control-2 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
[id^="carousel-"][id$="-0"]:checked~.control-0~.carousel-indicators li:nth-child(1) .carousel-bullet,
[id^="carousel-"][id$="-1"]:checked~.control-1~.carousel-indicators li:nth-child(2) .carousel-bullet,
[id^="carousel-"][id$="-2"]:checked~.control-2~.carousel-indicators li:nth-child(3) .carousel-bullet {
color: #2b6cb0;
/*Set to match the Tailwind colour you want the active one to be */
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="carousel relative rounded-lg relative overflow-hidden shadow-xl border-4 bg-white border-white my-4">
<div class="carousel-inner relative overflow-hidden rounded-b-md rounded-t-sm w-full">
<input class="carousel-open" data-index="0" type="radio" id="carousel-1-0" name="carousel-1" aria-hidden="true" hidden="">
<div class="carousel-item absolute opacity-0 bg-center bg-no-repeat h-0 bg-cover" style="padding-bottom: 33.33%; background-image: url(https://mdbootstrap.com/img/new/slides/054.jpg);"></div>
<label for="carousel-1-1" class="control-0 w-8 h-8 ml-2 sm:ml-3 md:ml-4 lg:ml-5 md:ml-10 absolute cursor-pointer hidden font-bold rounded-full leading-tight text-center z-10 inset-y-0 left-0 my-auto flex justify-center content-center">
<
</label>
<label for="carousel-1-1" class="next control-0 w-8 h-8 mr-2 sm:mr-3 md:mr-4 lg:mr-5 absolute cursor-pointer hidden rounded-full leading-tight text-center z-10 inset-y-0 right-0 my-auto">
>
</label>
<input class="carousel-open" data-index="1" type="radio" id="carousel-1-1" name="carousel-1" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item absolute opacity-0 bg-center bg-no-repeat h-0 bg-cover" style="padding-bottom: 33.33%; background-image: url(https://mdbootstrap.com/img/new/slides/043.jpg);"></div>
<label for="carousel-1-0" class="control-1 w-8 h-8 ml-2 sm:ml-3 md:ml-4 lg:ml-5 md:ml-10 absolute cursor-pointer hidden font-bold rounded-full leading-tight text-center z-10 inset-y-0 left-0 my-auto flex justify-center content-center">
<
</label>
<label for="carousel-1-0" class="next control-1 w-8 h-8 mr-2 sm:mr-3 md:mr-4 lg:mr-5 absolute cursor-pointer hidden rounded-full leading-tight text-center z-10 inset-y-0 right-0 my-auto">
>
</label>
<ol class="carousel-indicators">
<li class="inline-block">
<label for="carousel-1-0" class="carousel-bullet cursor-pointer text-xs block text-white hover:text-blue-700 opacity-75">
•
</label>
</li>
<li class="inline-block">
<label for="carousel-1-1" class="carousel-bullet cursor-pointer text-xs block text-white hover:text-blue-700 opacity-75">
•
</label>
</li>
</ol>
</div>
</div>
I'm trying to make this automatically scroll through the images every 5 seconds. This works unless I click the buttons to manually navigate through the images. Then it returns the following error.
Uncaught DOMException: Failed to execute 'removeNamedItem' on
'NamedNodeMap': No item with name 'checked' was found.
I'm not sure why I'm getting this error though as there does appear to be a checked input.
Related
Trying to implement a mobile menu display and hide on screen resize using a react component an external style file and tailwind to close a mobile nave when a button is clicked
In the process of trying to implement a react and tailwind version of the nav menu in the below github link which was done using tailwind and CSS
https://github.com/bradtraversy/tailwind-course-projects/blob/main/website-projects/shortly/js/script.js
The webpage looks something like the below URL
https://tailwindfromscratch.com/website-projects/shortly/index.html
Basically by trying to implement a react version of the function "navToggle"
Please advise me on how I can toggle the class state by using the Boolean state value. If true, to add the class name to the className property in the component file or changes to make in the class file or both
Thanks
Here's my code below
Main component
import React, {useState} from 'react';
import mainLogo from '../../../public/assets/images/logo.png';
import {NavLink} from "#remix-run/react";
const Header = () => {
const [menuIsOpen, setMenuIsOpen] = useState("false");
// Toggle Mobile Menu
const navToggle= () => {
setMenuIsOpen(!menuIsOpen);
};
return (
<>
{/*Nav Container*/}
<nav className="relative container mx-auto p-6">
{/*Flex Container For All Items*/}
<div className="flex items-center justify-between">
{/*Flex Container For Logo/Menu*/}
<div className="flex items-center space-x-20">
{/*Logo*/}
<NavLink className='d-lg-none' to='/'>
<img src={mainLogo} alt='Logo' />
</NavLink>
{/*Left Menu*/}
<div className="hidden space-x-8 font-bold lg:flex">
<NavLink to='/' className="text-grayishViolet hover:text-veryDarkViolet">
Home
</NavLink>
<NavLink to='/about' className="text-grayishViolet hover:text-veryDarkViolet">
About
</NavLink>
<NavLink to='/services' className="text-grayishViolet hover:text-veryDarkViolet">
Products & Businesses
</NavLink>
<NavLink to='/contacts' className="text-grayishViolet hover:text-veryDarkViolet">
Contact us
</NavLink>
</div>
</div>
{/*Right Buttons Menu*/}
<div
className="hidden items-center space-x-6 font-bold text-grayishViolet lg:flex"
>
<div className='header-mail d-xl-block d-none'>
Email: xxx#xxxxxxxxxxxxx.xxx
</div>
</div>
{/*Hamburger Button*/}
<button
onClick={navToggle}
name="menu-btn"
id="menu-btn"
className="block hamburger lg:hidden focus:outline-none"
type="button"
>
<span className="hamburger-top"></span>
<span className="hamburger-middle"></span>
<span className="hamburger-bottom"></span>
</button>
</div>
{/*Mobile Menu*/}
<div
id="menu"
className="absolute hidden p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100"
>
<div
className="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm"
>
<NavLink to='/' className="w-full text-center">Home</NavLink>
<NavLink to='/about' className="w-full text-center">About</NavLink>
<NavLink to='/services' className="w-full text-center">Services</NavLink>
<NavLink to='/contacts' className="w-full text-center">Contact us</NavLink>
</div>
</div>
</nav>
</>
);
};
export default Header;
Style file
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
transition: all 0.25s;
position: relative;
}
.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
content: '';
position: absolute;
width: 24px;
height: 3px;
top: 0;
left: 0;
background: #9c9aa6;
transform: rotate(0);
transition: all 0.5s;
}
.hamburger-middle {
transform: translateY(7px);
}
.hamburger-bottom {
transform: translateY(14px);
}
.open {
transform: rotate(90deg);
transform: translateY(0px);
}
.open .hamburger-top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .hamburger-middle {
display: none;
}
.open .hamburger-bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
remove the hidden class from the menu div and use the menuIsOpen as a condition to display the menu
{/*Mobile Menu*/}
{ menuIsOpen && (
<div
id="menu"
className="absolute p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100"
>
<div
className="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm"
>
<NavLink to='/' className="w-full text-center">Home</NavLink>
<NavLink to='/about' className="w-full text-center">About</NavLink>
<NavLink to='/services' className="w-full text-center">Services</NavLink>
<NavLink to='/contacts' className="w-full text-center">Contact us</NavLink>
</div>
</div>
)
}
Just a quick question for CSS tailwind
I want the letters in the boxes to be centered within the box, can someone show me what to change to make this ?
At the moment the text in the box are left aligned but the problem is that
className={` md:px-[30px] ease-in duration-100 bg-gray-900 transition-colors ${
fixed
? "fixed w-full h-20 shadow-md z-[100] bg-gray-900 shadow-gray-900 border-b-2 border-[black]"
: " w-full h-20 z-[100] "
} `}
>
<div className="flex text-white justify-between items-center w-full h-full pl-[10px] px-2 2xl:px-16 ">
<div className="relative w-[65px] h-[65px] ">
<Image
fill
src="/projects/logo.jpeg"
className="absolute object-fill rounded-full "
/>
</div>
<div>
<ul
className={` ${
fixed ? "hidden md:flex text-white" : " hidden md:flex"
} md:hidden lg:flex`}
>
<Link href="/#intro" prefetch={false}>
<li className="ml-10 text-small uppercase hover-border-b">
Home
</li>
</Link>
If possible can you also tell me how to unhide the box layout (the lines that form the box) please
There are two ways to do this. The first example you can use text-align: center and padding-top properties. If you calc() 1/2 the height of your element minus 1em, that will center the text top and bottom.
text-align: center;
padding-top: calc(50px - 1em);
However, this will not ensure the text is centered vertically if the size of your element changes in the future. A simpler and more robust method is to set your element to display: flex with justify-content and align-items set to center.
#yourDiv {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid blue;
}
<div id="yourDiv">Your text</div>
As for the rounded border, that appears to be a CSS class - you may want to search through your code for any border properties that are set on the element or pseudo-elements.
I have made a dropdown menu and want to make it an ease down transition. Can somebody help?
The dropdown property marks the total dropdown div.
The dropdown-content property marks the hidden content
Here's my css properties:
.dropdown {
position: relative;
display: inline-block;
transition: all 0.5s ease;
}
.dropdown-content {
display: none;
position: relative;
min-width: 160px;
z-index: 1;
clear:both;
width:100%;
overflow: hidden;
text-align: center;
transition: height .4s ease;
}
.dropdown:hover .dropdown-content {display: block; transition-property: dropdown-content; transition-duration:0.4s;}
Here's my associated javascript code:
<div className="flex-1 w-full xs:max-w-none sm:w-full sm:min-w-155 dark:bg-nft-black-3 bg-white rounded-2xl p-4 m-4 sm:my-2 sm:mx-2 cursor-pointer shadow-md dropdown dropbtn">
...
</div>
<div className='flex flex-row w-full justify-center items-center dropdown-content'>
<div className='flex w-2/3 pt-2 pb-4 pr-2 text-sm'>
{proposal.description}
</div>
{proposal.deadline.getTime() > Date.now() && !proposal.executed ? (
<div className='flex w-full'>
<div className='flex flex-row'>
<PostCardButton
btnName={`Vote Yes`}
classStyles={"rounded-xl sm-text-sm"}
handleClick={() => voteOnProposal(proposalId, "YAY")}
/>
</div>
<div className='px-5'>
<PostCardButton
btnName={"Vote No"}
classStyles={"rounded-xl px-7 sm:text-sm"}
handleClick={() => voteOnProposal(proposalId, "NAY")}
/>
</div>
</div>
) : proposal.deadline.getTime() < Date.now() && !proposal.executed ? (
<div className='flex flex-row w-full'>
<PostCardButton
btnName={`Execute Proposal`}
classStyles={"rounded-xl"}
handleClick={() => executeProposal(proposalId)}
/>
</div>
) : (
<div className='flex w-full font-semibold text-lg'>
Executed
</div>
)}
</div>
</div>
If you're achieving the animation by transitioning height property, then the problem is: you are not changing it in the css classes.
.dropdown-content {
height: 0px;
overflow: hidden;
transition: height 0.4s ease;
}
.dropdown:hover .dropdown-content {
height: 360px;
}
Also, dropdown-content is not an animatable CSS property. So, transition-property: dropdown-content; cannot be used here.
If the height of your content is not constant, then you should use javascript to find it and then change it.
Using height: max-content; will not work.
The easiest way to do this would be to calculate the complete height of dropdown content in both cases [proposal.deadline.getTime() > Date.now() and vice versa] and add them in the css.
I'm developing a website using Tailwind. I want to make Level 2 of navigation menu to always open and close when scrolling down. I tried to use display: block, but what I've got, it's overridden the flex rule. I did use a ternary code inside "ul" tag but it's not working.
Please see the screenshot of my expectation:
Currently, I placed the open class inside ul tag, trying to make the Level 2 to always open. I really appreciate your inputs
#tailwind base;
#tailwind components;
#tailwind utilities;
.work-sans {
font-family: 'Work Sans', sans-serif;
}
#menu-toggle:checked + #menu {
display: block;
}
.hover\:grow {
transition: all 0.3s;
transform: scale(1);
}
.hover\:grow:hover {
transform: scale(1.02);
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #000;
/*Set to match the Tailwind colour you want the active one to be */
}
.mega-menu {
display: none;
left: 0px;
position: absolute;
text-align: left;
width: 100%;
}
.mega-menu > .open {
height: auto!important;
visibility: visible!important;
}
.hoverable {
position: static;
}
.hoverable > a:after {
content: "\25BC";
font-size: 10px;
padding-left: 12px;
position: relative;
top: -1px;
}
.hoverable:hover .mega-menu {
display: flex;
}
<div class="hidden md:flex md:items-center md:w-auto w-full order-3 md:order-1" id="menu">
<nav>
<ul class="md:flex flex-wrap items-center justify-between text-base text-gray-700 pt-4 md:pt-0">
<li class="hoverable text-gray-500 hover:text-black">
<a class="relative inline-block no-underline text-base hover:text-black py-1.5 px-4" href="#">Shop</a>
<ul class="flex flex-row h-auto bg-gray-300 p-2 mega-menu open">
<li class="pl-7">
<a class="text-sm">Prams & Strollers</a>
<!--Cards for Level 3 - design in card-->
<!--<div>
<p></p>
<a>Jive3</a>
<a>Jive3 Platinum</a>
<a>Metro</a>
<a>Jive</a>
<a>Explore more</a>
</div>-->
</li>
<li class="px-5"><a class="text-sm">Baby Carriers</a></li>
<li class="px-5"><a class="text-sm">Nursey</a></li>
<li class="px-5"><a class="text-sm">Feeding</a></li>
<li class="px-5"><a class="text-sm">Bundles</a></li>
<li class="px-5"><a class="text-sm">Capsules</a></li>
<li class="px-5"><a class="text-sm">Accessories</a></li>
<li class="px-5"><a class="text-sm">Need help deciding?</a></li>
</ul>
</li>
<li class="hoverable text-gray-500 hover:text-black">
<a class="relative inline-block no-underline text-base hover:text-black py-1.5 px-4" href="#">Demonstrations</a>
<ul class="flex flex-row h-auto bg-gray-300 p-2 mega-menu">
<li class="pl-7">
<a class="text-sm">Demos on Demand</a>
<!--Cards for Level 3 - design in card-->
<!--<div>
<p></p>
<a>Jive3</a>
<a>Jive3 Platinum</a>
<a>Metro</a>
<a>Jive</a>
<a>Explore more</a>
</div>-->
</li>
<li class="px-5"><a class="text-sm">In-Person</a></li>
<li class="px-5"><a class="text-sm">Events & Expos</a></li>
<li class="px-5"><a class="text-sm">Live Q&A</a></li>
</ul>
</li>
<li class="hoverable text-gray-500 hover:text-black">
<a class="relative inline-block no-underline text-base hover:text-black py-1.5 px-3" href="#">About Us</a>
<ul class="flex flex-row h-auto bg-gray-300 p-2 mega-menu">
<li class="pl-7">
<a class="text-sm">For Purpose</a>
<!--Cards for Level 3 - design in card-->
<!--<div>
<p></p>
<a>Jive3</a>
<a>Jive3 Platinum</a>
<a>Metro</a>
<a>Jive</a>
<a>Explore more</a>
</div>-->
</li>
<li class="px-5"><a class="text-sm">Our Origins</a></li>
<li class="px-5"><a class="text-sm">Why Redsbaby?</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!--Logo section-->
<div class="order-1 md:order-2">
<a class="flex items-center tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#">
Redsbaby
</a>
</div>
<!--Search, Profile, Cart-->
<div class="order-2 md:order-3 flex items-center" id="nav-content">
<a class="inline-block no-underline text-base text-gray-500 hover:text-black" href="#">Need help?</a>
<a class="pl-5 inline-block no-underline text-gray-500 hover:text-black" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</a>
<a class="pl-5 inline-block no-underline text-gray-500 hover:text-black" href="#">
<svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<circle fill="none" cx="12" cy="7" r="3" />
<path d="M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z" />
</svg>
</a>
<a class="pl-5 pr-3 inline-block no-underline text-gray-500 hover:text-black" href="#">
<svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z" />
<circle cx="10.5" cy="18.5" r="1.5" />
<circle cx="17.5" cy="18.5" r="1.5" />
</svg>
</a>
</div>
I managed to add the functionalities by using Alpine JS. I added as per below:
<div x-data="{ open: true }">
<div class="flex w-full">
<span class="pl-20 pr-1 pb-3 no-underline text-base hover:text-black">Shop</span>
<button #click="open = !open" class="flex items-center justify-between pb-3 text-gray-500 hover:text-gray-700 focus:outline-none">
<span>
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path x-show="! open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" style="display: none;" />
<path x-show="open" d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
</path>
</svg>
</span>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-150 transform" x-transition:enter-start="opacity-0 -translate-y-5" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150 transform" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-5" class="w-screen py-3 pl-6 mega-menu mb-16 sm:mb-0 shadow-sm flex flex-row h-auto bg-rb_gray-light">
<a class="text-sm pl-20 hover:text-black" href="#">Prams & Strollers</a>
<a class="text-sm px-5 hover:text-black" href="#">Nursey</a>
<a class="text-sm px-5 hover:text-black" href="#">Feeding</a>
<a class="text-sm px-5 hover:text-black" href="#">Bundles</a>
<a class="text-sm px-5 hover:text-black" href="#">Capsules</a>
<a class="text-sm px-5 hover:text-black" href="#">Accessories</a>
<a class="text-sm px-5 hover:text-black" href="#">Need help deciding?</a>
</div>
</div>
Read Alpinejs doc here : https://alpinejs.dev/directives/data
I have a code that when you click on a button, a div appears. But the thing is, my div slides in from the top, and I want to have it when someone clicks on the button, it slides in from the right with transitions. But I don't know how to change my current code to make that work. I know I can't switch from display: none to visibility and opacity to add CSS animations, right? So what can I do to make this as smooth as possible? Can someone please take a look and help me out?
Here's my code:
$(function() {
$("a#toggle").click(function() {
$("#slidein").slideToggle();
return false;
});
});
#slidein {
display: none;
}
.card {
background-color: #bdbdbd;
text-transform: uppercase;
position: fixed;
right: 0;
top: 0;
height: 100%;
}
.close {
position: absolute;
right: 0;
background: #fff;
opacity: 1;
color: #29292b;
font-size: 10px;
text-decoration-color: #757575;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="slidein">
<div class="card rounded-0 border-0">
<div class="card-header border-0 p-0">
<button type="button" class="close p-2">
<span aria-hidden="true">x close</span>
</button>
<img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
</div>
<!-- /.card-header -->
<div class="card-block py-4 px-3">
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT
<span>TEXT</span>
<span>TEXT</span>
</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<div class="form-group">
<textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
</div>
</div>
<!-- /.card-block -->
</div>
</div>
Contact
You can use CSS transition to achieve your goal. Initially, the slide in panel #slidein will sit outside of the right edge of your screen. A CSS class in will be toggled when you click a#toggle. Clicking on button.close will remove the class in from #slidein that will slide the panel out.
$(function() {
$("a#toggle").click(function() {
$("#slidein").toggleClass("in");
return false;
});
$("button.close").click(function() {
$("#slidein").removeClass("in");
return false;
});
});
#slidein {
position: fixed;
top: 0;
width: 100%; /*modify this value to fit your needs*/
right: -100%; /*modify this value to fit your needs*/
/*css transition*/
-webkit-transition: right 500ms ease-out;
-moz-transition: right 500ms ease-out;
-o-transition: right 500ms ease-out;
transition: right 500ms ease-out;
}
#slidein.in {
right: 0;
}
.card {
background-color: #bdbdbd;
text-transform: uppercase;
height: 100%;
}
.close {
position: absolute;
right: 0;
background: #fff;
opacity: 1;
color: #29292b;
font-size: 10px;
text-decoration-color: #757575;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="slidein">
<div class="card rounded-0 border-0">
<div class="card-header border-0 p-0">
<button type="button" class="close p-2">
<span aria-hidden="true">x close</span>
</button>
<img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
</div>
<!-- /.card-header -->
<div class="card-block py-4 px-3">
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT
<span>TEXT</span>
<span>TEXT</span>
</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<div class="form-group">
<textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
</div>
</div>
<!-- /.card-block -->
</div>
</div>
Contact