i have a form for edit .
in this form i have 2 div .
the first div editForm for show form for edit and second form infos for show detail of this form .
i want when the size of page for mobile or tablet the infos must be hide and show the button for open it . its worked and it hide when in the mobile or table size and when click on the button in going hide but i need when the infos show or hide with button it using the animation for show or hide .
Demo
how can i do this ???
html :
<div class="container">
<div id="editForm" class="editForm">
<form>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
</form>
</div>
<div id="infos" class="infos">
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
</div>
<div id="mySidenav" class="sidenav">
<a (click)="showHideInfo()">open</a>
</div>
css:
p {
font-family: Lato;
}
.container{
display: flex;
}
.editForm{
border: 1px solid red;
width: 60%;
display: flex;
justify-content: center;
}
.infos{
border: 1px solid red;
width: 40%;
display: flex;
justify-content: center;
}
#media (max-width: 768px)
{
.infos{
display: none;
width: 0;
}
.editForm{
width: 100%;
}
}
#mySidenav a {
position: fixed;
background-color: #4caf50;
right: 0px;
-webkit-transition: 0.3s;
transition: 0.3s;
top: 50%;
display: flex;
padding: 3px;
width: 39px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 5px 0px 0px 5px;
}
#mySidenav a mat-icon{
margin-right: 10px;
margin-top: 6px;
}
#mySidenav a:hover {
right: 0;
}
#about {
top: 20px;
background-color: #4caf50;
}
and this my code when click on the button for show or hide infos :
showHideInfo(): void {
if(this.sidebarShow)
{
var editorEdit = document.getElementById('editForm');
editorEdit.style.visibility='visible';
editorEdit.style.width='100%';
var avtionInfo= document.getElementById('infos');
avtionInfo.style.display='none'
avtionInfo.style.width='0'
this.sidebarShow=!this.sidebarShow;
}else{
var editorEdit = document.getElementById('editForm');
editorEdit.style.visibility='hidden';
editorEdit.style.width='0';
var avtionInfo= document.getElementById('infos');
avtionInfo.style.display='block'
avtionInfo.style.width='100%'
avtionInfo.style.animation="showInRghit"
this.sidebarShow=!this.sidebarShow;
}
}
You can achieve this by giving a transition to the .editForm such as :
.editForm{
transition: width 0.3s ease;
}
Please try this and tell if this is the requirement.
Related
! Updated code !
I'm recently trying to learn html/css to code a website. I've been following multiple tutorials but for some reason, my modals aren't working. The buttons to open/close modals aren't working. If anyone could offer any help it would be much appreciated!
Below I've included my html file, stylesheet, and javascript file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://kit.fontawesome.com/935b67cf83.js" crossorigin="anonymous"></script>
<script src="JS.js"></script> <!-- used to link to javascript-->
<title>yo</title>
</head>
<body>
<section class="flex" id="portfolio">
<h1>
PROJECTS
<!--- <div class="horizontalLine" </div> --->
</h1>
<div class="gallery">
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#trainModal">Open Modal 1</button>
<!--- <a class="btn" id="TrainBtn" href="#">LEARN MORE</a>
--->
</div>
</div>
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#project2Modal">Open Modal 2</button>
<!---
<a class="btn" id="Project2Btn" href="#">LEARN MORE</a> --->
</div>
</div>
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#project3Modal">Open Modal 3</button>
</div>
</div>
</div>
</section>
<!--pop-ups, bg-modal means background-->
<div class="modal" id="trainModal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#trainModal">
×
</button>
<h2> MerseyTrainsLive</h2>
</div>
<div class="modal-body">
<p> idem espum </p>
</div>
</div>
</div>
<div class="modal" id="project2Modal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#project2Modal">
×
</button>
<h2> project 2</h2>
</div>
<div class="modal-body">
<p> idem espum 2 </p>
</div>
</div>
</div>
<div class="modal" id="project3Modal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#project3Modal">
×
</button>
<h2> project 3</h2>
</div>
<div class="modal-body">
<p> idem espum 3 </p>
</div>
</div>
</div>
<div id="overlay"> </div>
</body>
</html>
style.css
body {
}
h1 {
font-size: 40px;
text-align: center;
}
.horizontalLine {
border-top: 5px solid black;
width: 100px;
margin: auto
}
.gallery {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center; /*makes individual boxes centered*/
}
.gallery img {
height: 300px;
width: 300px;
}
.gallery .projectBox {
width: 300px;
position: relative;
display: inline-block;
/*margin: 10px; /*can be used to make the photos spaced out*/
}
.gallery .projectBox img {
width: 100%;
border: 4px solid black;
transition-duration: 0.5s;
opacity: 1;
}
/*when hover over image, the image disappears*/
.gallery .projectBox:hover img {
opacity: 0;
}
.gallery .projectBox .span {
text-align: center;
display: none;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
}
.gallery .projectBox .span p1 {
margin: auto;
font-size: 24px;
line-height: 40px;
padding: 20px;
}
.gallery .projectBox .span p2 {
margin: auto;
font-size: 16px;
line-height: 40px;
}
.gallery .projectBox:hover .span {
opacity: 1;
display: block;
}
.gallery .projectBox .span a {
text-decoration: none;
}
/*modal open buttons*/
.gallery .projectBox .span .modal-open {
display: flex; /*makes layout nice :) */
width: 150px;
padding: 10px; /*how far the lines of button are from text*/
margin: 30px auto;
color: black;
font-size: 20px;
outline: none;
border: 2px solid #f44336;
background: transparent;
cursor: pointer;
}
.gallery .projectBox .span .modal-open:hover {
color: white;
background: #f44336;
}
/* popups */
.modal {
width: 60%;
height: 60%;
position: fixed;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; /*so appears on top of overlay*/
text-align: center;
background-color: white;
display: none;
}
/*modal close close button*/
.modal-close {
background-color: transparent;
border: none;
font-size: 1.5rem;
}
.modal.active {
display: flex;
}
.modal .modal-content {
display: flex;
border-radius: 4px;
position: relative; /*lets the .close position itself according to content*/
}
/*image for top of modal*/
.modal .modal-content img {
height: 100px;
width: 100px;
padding: 20px;
}
.modal .modal-header .modal-close {
position: absolute;
top: 5px;
right: 14px;
font-size: 42px;
cursor: pointer;
border-radius: 4px;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
}
.overlay.active {
display: block;
}
JS.js
const btns = document.querySelectorAll(".modal-open");
const close_btns = document.querySelectorAll(".modal-close");
const overlay = document.getElementById("overlay");
btns.forEach((btn) => {
const target = btn.dataset.target;
btn.addEventListener("click", () => {
document.querySelector(target).classList.add("active");
overlay.classList.add("active");
})
})
close_btns.forEach((btn) => {
btn.addEventListener("click", () => {
document.querySelector(btn.dataset.target).classList.remove("active");
overlay.classList.remove("active");
})
})
window.onclick = (e) => {
if (e.target == overlay) {
const modals = document.querySelectorAll(".modal");
modals.forEach((modal) => modal.classList.remove("active"));
overlay.classList.remove("active");
}
}
Below is a screenshot of the website page
When I hover over the projectBoxes it reveals info on the project, and the button to open more info on the project (displayed in a modal)
First, let's correct the HTML button to trigger modal number 3.
<button class="modal-open" data-target="#project3Modal">Open Modal 3</button>
Notice the change in "data-target" attribute. The value of this attribute should point to the "id" attribute of the respective modal (as per the JS implementation).
Next, for selecting the overlay <div>, let's use document.getElementById method. As there is only one id="overlay" in your HTML, selecting the element with its unique ID is a good practice, in my personal opinion.
So let's change the code in JS as below:
const overlay = document.getElementById("overlay");
btns.forEach((btn) => {
const target = btn.dataset.target; // Declaring target
btn.addEventListener("click", () => {
document.querySelector(target).classList.add("active");
overlay.classList.add("active");
});
});
With the above two changes, everything should work well. If not, please let me know so I can assist you further. If you need clarity for above code, please do let me know. :)
So I am trying to build this website but the button when pressed does not pop up the screen that will ask to fill with name and phone number and was wondering why this is not working. I am a complete noob when it comes to HTML and CSS, still learning most of the ways and needed help any advice and corrections will be greatly appreicated. Also, I am using JSFiddle I do not know if that makes a difference. Thank you in advance.
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* Full-width input fields */
input[type=text], input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: clear;
color: black;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 25px;
}
button:hover {
opacity: 0.8;
background-color: red;
}
/* this is for the box on the top of page */
.boxbar_top{
height:20%;
width: 100%;
position: static; /*assign on top when stroll */
right:0;
overflow:hidden;
background-color: red;
}
/*accessing the button layout */
.boxbar_top a {
float: left;
text-align: left;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* bottom layout of screen */
.boxbar_bttom{
height: 20%;
width: 100%;
position: static; /* assign on top when stroll */
right: 0;
overflow: hidden;
background-color: red;
}
/*accessing the bottom layput */
.box_bar_bttom a{
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* tabs layout */
.tabs{
background-color: inherit;
float: center;
border: 15px solid red;
padding: 14px 16px;
font-size: 17px;
border-radius: 25px;
padding: 20px;
width:200px;
height: 100%;
}
/*style of the tabs inside */
.tabs-button{
margin: 0;
position: absolute;
color: black;
padding: 22px 16px;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
cursor: pointer;
font-size: 20px;
}
.box{
margin: auto;
width: 60%;
padding: 10px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
/*show the text when hover through tab */
.hiddenText{
display: none;
}
.hoverDiv:hover + .hiddenText{
display: block;
color: green;
font-size: 22px;
font-weight: bold;
}
/* cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* the center of first-last-#...etc */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
padding-top: 60px;
}
/*model layput when clicked */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid red;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/*hover on layout */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
<!-- this is the layout of the first page for crete a cake -->
<!-- this is the problem of aligning the iteams on the right spots -->
<!-- problem the buttons are not shown -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="order cake">
<title>Create Cake</title>
</head>
<body>
<div class="boxbar_top">
<a class="active"> </a>
<form>
<select name="dropdown">
<option value="ENGLISH"></option>
<option value="SPANISH"></option>
</select>
</form>
<p class="boxbar_top; align: right;">
<h2 style="color: white; align-items: right;">
Order your cake online
</h2>
</p>
</div>
<div class="box">
<div class="tabs">
<!-- when clicked pop asked for user name and number -->
<div class="imgcontainer">
<span onclick="document.getElementById('info').style.display='none'" class="close" title="Close Modal"> </span>
<button onclick ="container"> ADD ORDER </button>
</div>
<div class="modal">
<div class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<!-- this is the area pops out when the user hits add order -->
<div class="container">
<!-- enter the first name -->
<label for="fname"><b>First Name</b></label>
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<!-- enter the last name -->
<label for="lname"><b>Last Name</b></label>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<!-- phone number -->
<label for="phone"><b>Phone Number</b></label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" placeholder="Phone Number" required>
<!-- submit number -->
<button type="submit" value="Submit">Submit</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('info').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
</div>
<div style="tabs-button">
<button onclick="document.getElementById('info').style.display='block'"> CHECK ORDER </button>
</div>
<div style="tabs-button">
<button onclick=" ">DELETE ORDER </button>
</div>
</div>
</div>
<div class="boxbar_top">
<a class="active"> </a>
</div>
</body>
</html>
you have not assigned id to your modal, but have done getElementById('id01')
<div class="modal" id="id01">
and your btn triggering modal should be sthng like this:
<button type="button" id="btn">Add order</button>
and your js:
var btn = document.getElementById("btn");
var modal = document.getElementById("id01");
btn.onclick = function() {
modal.style.display = "block";
}
I currently am trying to code a website to animate moving across the x-axis to access different sections of the page (page content in 'tab-content'). I have a navbar that has different headers, this is fixed, I want the user to click on each header and be taken to that section. I managed to take the user to the desired section/div with some JS code however, there isn't any animation it defaults to the selected section/div just suddenly being on screen. How do I animate with pure JS or CSS. I need the clicking of the header to move (motion) the user to that div. I'm new to web dev.
here some of my code
HTML
<div class="main-info">
<div class="nav-container">
<div class="nav-bar">
<ul>
<li data-tab-target="#show" class="tab">Show</li>
<li data-tab-target="#about" class="tab">About</li>
<li data-tab-target="#lookbook" class="tab">Lookbook</li>
<li data-tab-target="#process" class="tab">Process</li>
</ul>
</div>
<div class="info overlay">
<div class="text">
MA
Coming Soon
BA
</div>
Back
</div>
</div>
<div class="tab-content">
<div id="show" data-tab-content class="active">
<p>VIDEO</p>
</div>
<div id="about" data-tab-content>
<p>About</p>
</div>
<div id="lookbook" data-tab-content>
<p>Lookbook</p>
</div>
<div id="process" data-tab-content>
<p>Process</p>
</div>
</div>
</div>
CSS
.main-info {
background-color: transparent;
height: 100vh;
overflow: hidden;
}
.nav-container {
position: fixed;
}
.nav-bar {
width: 80vw;
height: 10vh;
left: 10vw;
position: absolute;
top: 5vh;
}
.nav-bar ul {
text-transform: uppercase;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
.tab a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1rem;
color: black;
text-decoration: none;
}
.tab:hover {
cursor: pointer;
opacity: 0.6;
}
.tab.active {
background-color: whitesmoke;
}
.info {
width: 90vw;
height: 10vh;
/* border: 1px solid red; */
left: 5vw;
position: absolute;
top: 80vh;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.info a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1.1rem;
color: black;
text-decoration: none;
border: 1px solid teal;
}
.text {
width: 30%;
display: flex;
justify-content: space-between;
}
.tab-content {
border: 1px solid teal;
position: absolute;
left: 0;
top: 0;
height: 100vh;
z-index: -11;
display: flex;
flex: row nowrap;
justify-content: flex-start;
}
[data-tab-content] {
border: 1px solid blueviolet;
background-color: violet;
font-size: 3rem;
color: blue;
scroll-behavior: smooth;
display: none;
width: 100vw;
height: 100vh;
}
.active[data-tab-content] {
display: block;
}
JS
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
});
tab.classList.add('active')
target.classList.add('active');
});
});
You almost got it. Instead of setting the scroll-behavior on the elements that are inside a scrollable element, put it on either the element that has a scrollbar.
.tab-content {
scroll-behavior: smooth;
}
Or on the top most element to have all elements move with a smooth scrolling animation.
:root {
scroll-behavior: smooth;
}
I'm not very knowledgeable in javascript. But I need a dropdown on a vertical menu that is pure javascript, so I copied/paste the script from W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
and modified it to fit the page style. This menu needs to be on multiple pages, so it's also an html include. I got it to somewhat work, but you have to double click the drop-drop down in order to close it and this needs to be a single-click. I've been searching for a solution for a couple weeks now and still not sure what I'm doing wrong. I can't use jquery, bootstrap or any outside library since it's not connected to the internet.
HTML:
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Codepen
The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.
You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:
(Run code snippet)
There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.
var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display= "block";
}
});
#content {
margin: 1.875em 0px 0.625em 0px;
width: auto;
background-color: #002f6c;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
display: inline-block;
overflow: hidden;
top: 9.375em;
}
.quick {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
font-family: sans-serif;
}
.quick a {
display: block;
height: auto;
padding-top: 0.625em;
padding-bottom: 0.625em;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
text-align: center;
text-decoration: none;
background-color: #888B8D;
}
.quick a:hover {
display: block;
width: auto;
height: auto;
color: #002F6C;
background-color: #FFD300;
}
.topvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmverthome {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.vertheader {
width: auto;
padding: 2%;
display: block;
text-align: center;
}
.vertbtn {
width: auto;
cursor: pointer;
display: block;
}
.vertbtn :hover {
background-color: #FFD300;
position: relative;
display: block;
}
a.backhome {
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
color: #fff;
text-align: center;
padding: 2%;
box-sizing: border-box;
}
a.backhome:hover {
color: #002f6c;
background-color: #FFD300;
position: relative;
display: block;
}
.quicklinks {
color: #fff;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
}
.drop-button {
padding-top: 0.625em;
padding-bottom: 0.625em;
text-decoration: none;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
color: #fff;
display: block;
border: none;
background-color: #888B8D;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.drop-button:hover {
color: #002f6c;
background-color: #FFD300;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.active {
background-color: #06a7e0;
color: white;
}
.dropdown-container {
display: none;
background-color: #b4e4f5;
border-bottom: solid 2px #06a7e0;
}
.dropdown-container > a {
background-color: #50c1e9;
border-bottom: solid 1px #06a7e0;
}
a {
display: block;
position: relative;
color: #f3f3f3;
text-decoration: none;
}
a:hover {
color: #fff;
position: relative;
}
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div>Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Consider the following scenario:
$(".tab").click(function() {
var position = $(this).index(".tabs .tab");
$(".content > div").removeClass("showing").removeClass("active");
$(".content > div").eq(position).addClass("active");
// active class makes display bock then without any delay opacity is changed by showing class
$(".content > div").eq(position).addClass("showing");
});
.tabs {
float: left;
background: #ccc;
margin-bottom: 10px;
}
.tab {
float: left;
border-right: 2px solid white;
padding: 15px;
}
.content {
float: left;
width: 100%;
}
.content > div {
padding: 15px;
background: #999;
transition: opacity 2s ease-out;
opacity: 0;
display: none;
}
.content > .active {
display: block;
}
.content .showing {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab1 tab">Tab1</div>
<div class="tab2 tab">Tab2</div>
<div class="tab3 tab">Tab3</div>
</div>
<div class="content">
<div class="content1">
Content 1
</div>
<div class="content2">
content 2
</div>
<div class="content3">
content 3
</div>
</div>
Now when I click on any tab opacity is not transitioned. But if put a little delay between adding active and showing classes Then the tabs are transitioned well as:
$(".tab").click(function() {
var position = $(this).index(".tabs .tab");
$(".content > div").removeClass("showing").removeClass("active");
$(".content > div").eq(position).addClass("active").delay(10).queue(function(){
$(".content > div").eq(position).addClass("showing");
});
});
.tabs {
float: left;
background: #ccc;
margin-bottom: 10px;
}
.tab {
float: left;
border-right: 2px solid white;
padding: 15px;
}
.content {
float: left;
width: 100%;
}
.content > div {
padding: 15px;
background: #999;
transition: opacity 2s ease-out;
opacity: 0;
display: none;
}
.content > .active {
display: block;
}
.content .showing {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab1 tab">Tab1</div>
<div class="tab2 tab">Tab2</div>
<div class="tab3 tab">Tab3</div>
</div>
<div class="content">
<div class="content1">
Content 1
</div>
<div class="content2">
content 2
</div>
<div class="content3">
content 3
</div>
</div>
Now after adding a delay from the point where content is displayed block the transitions work well. My questions are:
Why don't transition work when opacity is changed directly with display propert? Why does transtion work when there is some delay between display block and opacity:1?
If I put a delay of 0 seconds even then transition works correctly. why?
In my second example if I quickly click tabs then the showing class no longer adds. why? And why does adding dequeue to $(".content > div").eq(position).addClass("showing"); solve this problem?
To answer your headline question, not all CSS properties are animatable.
display is not animatable
opacity is animatable
Further Reading:
CSS Animated Properties by Mozilla Developer Network
For the sake of demonstration, here is an example of tabbed content fade-in and fade-out just using the CSS pseudo-class :target (obviating the need for any scripting in jQuery or javascript):
.tabbed-content {
position: relative;
}
a[class^="tab"] {
display: inline-block;
float: left;
height: 60px;
line-height: 60px;
margin-bottom: 10px;
padding: 0 15px;
color: #000;
background-color: #ccc;
border-right: 2px solid white;
text-decoration: none;
transition: background-color 1s ease-out;
}
div[id^="content"] {
position: absolute;
top: 62px;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
font-size: 72px;
opacity: 0;
box-sizing: border-box;
transition: opacity 2s ease-out;
}
.tab1:hover,
#content1 {
color: rgb(255,255,255);
background-color: rgb(255,0,0);
}
.tab2:hover,
#content2 {
color: rgb(255,255,255);
background-color: rgb(0,127,0);
}
.tab3:hover,
#content3 {
color: rgb(0,0,0);
background-color: rgb(255,255,0);
}
div[id^="content"]:target {
opacity: 1;
}
<div class="tabbed-content">
Tab1
Tab2
Tab3
<div id="content1">
Content 1
</div>
<div id="content2">
Content 2
</div>
<div id="content3">
Content 3
</div>
</div>