Total beginner here, learning HTML and CSS (not yet grid and flexbox). I am trying to make a section with two horizontal blocks consisting of an image/icon to the left and text on the right. Very simple, yet I somehow can't get the icon to float to the left of the text. It is stuck on the line below. What am I doing wrong? or what should I add?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="fas fa-chess-pawn fa-3x"></i>
</div>
<br><br>
<div class="primary">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="far fa-play-circle fa-3x"></i>
</div>
</div>
</section>
Bad idea to use float. I suggest you look into flexbox asap.
But if you really want to use it, you should change the HTML a little bit.
Think of it this way. You want the icon to be a 'column' and the title together with the text to be another column.
The best way to achieve that is to wrap the text and title inside a HTML element ( most probably a div )
Then you should specify the width used inside their parent .primary. So for example the icon has 5% and the title and text 95% - 20px which is the margin of the icon.
Also add float:left to the primary div. Because adding float:left to an element ( the icon and text ) gets that element out of the normal flow of the document. ( similar to position:fixed/absolute ) and so, for them to remain ' a part ' of the primary div , you need to add float:left on that div also.
See below
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
float:left;
width:100%;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
width:5%;
}
#strengths .primary .wrapper {
float:right;
width: calc(95% - 20px);
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="fas fa-chess-pawn fa-3x">icon</i>
</div>
<br><br>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="far fa-play-circle fa-3x">icon</i>
</div>
</div>
</section>
There was a similar question, based on the same w3school codes here
Dropdown navigation bar vs sticky navigation bar? asked and answered but I need a little more functionality.
On Desktop or wide screen:
The navbar is sticky when page is scrolled. The dropdown menu works. Happy with that.
On Mobile or narrow screen (when media queries kick in):
The sticky feature still works. However, navbar disappears when hamburger menu is clicked. No dropdown either. Navbar reappears and hamburger becomes functional when page is scrolled back to top.
I spent a good part of the day trying with various combinations in html and css but none seem to work. I suspect the JS myFunction() is the culprit but, as a relative newbie, I do not know enough JS to solve the problem.
Codepen can be viewed here https://codepen.io/harlequin8/pen/bxERNb/
Please help. Thank you
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {
myFunction2()
};
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunction2() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky")
}
}
body {
margin: 0;
font-family: Arial
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
/*vertical align with .topnav a, from 14px 16px*/
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
/* absolute;
ref. https://stackoverflow.com/questions/46535480/position-fixed-ruins-the-dropdown-menu-in-css-webpage */
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* stocky part begin */
.header {
padding: 0 16px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
/* sticky part end */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child),
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
border-bottom: .05px solid white;
/* dropdown separation line */
}
.topnav.responsive a:nth-child(5) {
border-top: .05px solid white;
}
/* dropdown separation line */
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
☰
</div>
</div>
About
☰
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stck to the top when you reach its scroll position</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
</div>
Your problem is one of specificity. Your .sticky class correctly adds position: fixed to keep your navbar in place for the expanded responsive menu... though the .topnav.responsive selector adds position: relative with more specificity.
To correct this, I would recommend creating a new class inside of your media query to add position:fixed back, whilst giving more specificity:
#media screen and (max-width: 600px) {
.topnav.responsive.sticky {
position: fixed;
}
}
This can be seen in the following:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {
myFunction2()
};
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunction2() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky")
}
}
body {
margin: 0;
font-family: Arial
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
/*vertical align with .topnav a, from 14px 16px*/
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
/* absolute;
ref. https://stackoverflow.com/questions/46535480/position-fixed-ruins-the-dropdown-menu-in-css-webpage */
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* stocky part begin */
.header {
padding: 0 16px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
/* sticky part end */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child),
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive.sticky {
position: fixed;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
border-bottom: .05px solid white;
/* dropdown separation line */
}
.topnav.responsive a:nth-child(5) {
border-top: .05px solid white;
}
/* dropdown separation line */
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
☰
</div>
</div>
About
☰
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stck to the top when you reach its scroll position</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
</div>
Given the below flex CSS layout.
I need the images to scale smaller as the page is resized, hence the img { width: 100% } This allows the page to be resized, and the images scale accordingly.
I am unsure of why this layout results in the three Blog entries being of different width, particularly as the images in question are all the same.
Here is a working bootply.
div.container div.blog,
div.container-fluid div.blog {
display: flex;
flex: 1;
flex-flow: row nowrap;
}
div.container div.blog div,
div.container-fluid div.blog div {
margin: 0 12.5px;
}
div.container div.blog div:first-of-type,
div.container-fluid div.blog div:first-of-type {
margin-left: 0px;
}
div.container div.blog div:last-of-type,
div.container-fluid div.blog div:last-of-type {
margin-right: 0px;
}
div.container div.blog div img,
div.container-fluid div.blog div img {
width: 100%;
}
div.container div.blog h1,
div.container-fluid div.blog h1 {
color: #8f825a;
font-size: 2.7rem;
text-transform: none;
}
div.container div.blog h2,
div.container-fluid div.blog h2 {
color: #8f825a;
font-size: 1.8rem;
}
div.container div.blog+section,
div.container-fluid div.blog+section {
margin-top: 5rem;
}
Given the following HTML
<div class="container">
<h1>Blog</h1>
<div class="blog">
<div>
<img src="image1">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit Libero tenetur,
earum repudiandae ut fuga qui modi maxime dolorem quo! Id maiores neque rem
dignissimos amet velit perspiciatis labore veritatis eligendi.
</p>
<h2>Fred Jones</h2>
<h3>2014-01-01</h3>
</div>
<div>
<img src="image2">
<h1>Eum debitis</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum debitis culpa modi, illo ullam necessitatibus
beatae. Eveniet sequi quos explicabo magni ipsum nostrum asperiores dolore aliquam libero
accusantium ullam omnis, sed fugiat dolorem est, quae quaerat deserunt labore delectus. Quis, earum fugit,
necessitatibus recusandae perferendis, ducimus dignissimos amet autem ea, consequatur neque!
</p>
<h2>Joe Soap</h2>
<h3>2014-01-01</h3>
</div>
<div>
<img src="image3">
<h1>Aliquid nesciunt delectus</h1>
<p>
Ut, sapiente, qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquid nesciunt delectus, quae deleniti voluptas neque consequatur,provident perspiciatis laborum culpa
corporis fugit earum cupiditate deserunt vero atque harum iste illum officia maxime. Et officia distinctio
corrupti repellat! Repellendus, distinctio voluptates, earum quidem dolore facere.
</p>
<h2>Ishmael</h2>
<h3>2014-01-01</h3>
</div>
</div>
</div>
You have specified flex: 1 on the flex container. It doesn't apply there.
You need to apply flex: 1 to the items, if you want them to distribute container space equally.
div.container div.blog,
div.container-fluid div.blog {
display: flex;
/* flex: 1; <----------- NOT DOING ANYTHING */
flex-flow: row nowrap;
}
The parent element of the above-reference code block (div.container) is not a flex container, so flex is having no effect.
Shift the rule to your flex items:
div.container div.blog div, div.container-fluid div.blog div {
margin: 0 12.5px;
flex: 1; /* NEW */
}
revised demo
I have many sections on my page. Every of these sections can have similar elements, for example in each of these sections can be h1 element.
I want to add css files where every of these css will be for only one section.
For example I have three sections on my page where ids are:
section1 -- section2 -- section3
I have three css files too with names:
section1.css -- section2.css -- section3.css
How to do that every css file refers to a suitable section?
Maybe can I add any additional block to every of these css files with section id?
I don't know why you want to do that, but if you want to have separate styles for each section which has unique ID just use the ID as a selector. For example:
section1.css
#section1 h1{ color:red;}
#section1 .someclass { color: blue}
section2.css
#section2 h1 { color: green;}
#section2 .someclass {color:yellow;}
And so on. You will have separate styles for each section selecting them by ID. I think it's the easiest way
CSS files doesn't refer to its elements (in your case id). Its the selector which actually targets elements. You can use separate for each of the children on each section.
Instead use inheritance with each id.
Have a look at the example snippet below:
/* Section 1 */
#section1 {
background: #ff0;
padding: 10px 15px;
}
#section1 p {
background: #99d;
}
/* Section 2 */
#section2 {
background: #99d;
padding: 10px 15px;
}
#section2 p {
background: #ae9;
}
/* Section 3 */
#section3 {
background: #ae9;
padding: 10px 15px;
}
#section3 p {
background: #ff0;
}
body {
margin: 0;
}
<div id="section1">
<strong>Section 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section2">
<strong>Section 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section3">
<strong>Section 3</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
Hope this helps!
I have a block with visible text and hidden. After hidden text became visible, main block will change size. What is the proper way to animate this re-sizing? Is it possible to use pure css solution for this?
.wrapper{
padding: 10px}
.common{
border: 1px solid #ccc;
width: 300px;
margin: 0 auto;
padding: 10px;
-moz-transition: max-height 2s;
}
p.foo{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="common">
<button onclick="$('p.foo').toggle()">Click me</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod magnam nulla ex aperiam, unde id ea amet tenetur magni harum quibusdam nihil ipsam sed natus excepturi impedit iure sapiente molestias repudiandae a iusto possimus, modi, molestiae saepe ab! Obcaecati odit deserunt alias consectetur perspiciatis, possimus</p>
<p class="foo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod magnam nulla ex aperiam, unde id ea amet tenetur magni harum quibusdam nihil ipsam sed natus excepturi impedit iure sapiente molestias repudiandae a iusto possimus, modi, molestiae saepe ab! Obcaecati odit deserunt alias consectetur perspiciatis, possimus</p>
</div>
</div>
size of block part with hidden text is always the same and can be known
size of block part with visible is unknown
you can't animate with display: none; to display: block; but you can animate a height value if you know the new height target value already - you can set the hidden element to 0 with overflow: hidden; so nothing of the hidden element will be seen before the click element and if you prefer to make the animate with CSS3 so you can use a new class for the new height value and use the .toggleClass() JQuery function.
i recommend you not to use it as an inline...
HTML & JQuery:
<button onclick="$('p.foo').toggleClass('show')">Click me</button>
CSS:
p.foo
{
height: 0;
overflow: hidden;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
p.foo.show
{
height: 144px;
}
fiddle: http://jsfiddle.net/coyxhprp/