I'm using a text editor for posts that creates <p> for each part of the content.
Sometimes the content contains 1 image or more and sometimes no images.
.post{
background-color: #000;
margin-bottom: 20px;
color: #fff
}
.post img + img{
width: 50%
}
<div class="post">
<p>First Post</p>
<p>
<img src="http://placehold.it/300x300/200">
</p>
</div> <!-- .post -->
<div class="post">
<p>Second Post</p>
<p>
<img src="http://placehold.it/300x300/200">
<img src="http://placehold.it/300x300/200">
</p>
</div> <!-- .post -->
So If there are two images, I want each one to take 50% of the width.
I can set the width of the second image:
.posts img + img{
width:50%
}
But how to select the first one?
Here is a live fiddle:
http://jsfiddle.net/zjwhgq81/14/
I need a x-browser compatible solution that is supported in most of the browsers on different browsers.
Please don't suggest adding a class or an id to the img, As I mention I'm using a text editor.
Try this:
Select post with one child
.post p img:first-child:nth-last-child(1) {
width: 100%;
}
Select post with more child
/* Select the first of more */
.post p img:nth-child(1) {
width:60%
}
/* Select others of more except the first */
.post p img:nth-child(n+2) {
width: 10%;
}
.post{
background-color: #000;
margin-bottom: 20px;
color: #fff;
width:100%;
}
.post p img:first-child:nth-last-child(1) {
width: 100%;
}
.post p img:nth-child(1) {
width:60%
}
.post p img:nth-child(n+2) {
width: 10%;
}
<div class="post">
<p>First Post</p>
<p>
<img src="http://placehold.it/300x300/200">
</p>
</div> <!-- .post -->
<div class="post">
<p>Second Post</p>
<p>
<img src="http://placehold.it/300x300/200">
<img src="http://placehold.it/300x300/200">
</p>
</div> <!-- .post -->
.post p img:first-child, .post p img:last-child {
width:50%;
}
.post p img:last-child:first-child {
width:100%
}
or
.post p img {
width:50%;
}
.post p img:last-child:first-child {
width:100%
}
when there is only one image the first and last is the same so you can set that to either 100% or anything you want.
enter code hereYou can use Jquery to determinate the width of each img. For me, the easiest way to do it would be like this:
for (let i = 0; i < $('.post p').length; i++) {
let items = $($('.post p')[i]).children();
items.css('width', (100 / items.length) + '%');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h2 {
text-align: center;
text-shadow: 1px 1px #111;
padding: 20px 0;
}
p {
padding: 0;
display: flex;
}
.post{
background-color: #999;
margin-bottom: 20px;
color: #fff;
}
.post img {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<h2>First Post</h2>
<p>
<img src="http://placehold.it/300x300/200">
</p>
</div>
<div class="post">
<h2>Second Post</h2>
<p>
<img src="http://placehold.it/300x300/200">
<img src="http://placehold.it/300x300/200">
</p>
</div>
Related
Well there are two cards and an ellipsis within it , onclicking the ellipsis it should show the div i.e. div with id = report.But it is not working for me. i tried the following as mentioned below in the code but it didn't work for me. Please have a glance and hope experts will help me in this regard.
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) =>
el.addEventListener("click", (event) => {
const report = event.currentTarget.querySelector("#report");
report.classList.toggle("show");
})
)
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag #report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag #report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
#report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div id="report" class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div id="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
The currentTarget in the event handler will hold the .ellipsis button and the subsequent querySelector searches for the “report” div underneath the button (when it is actually a sibling).
MDN on Element.querySelector():
The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
Quick and dirty fix would be invoking parentElement.querySelector instead.
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) =>
el.addEventListener("click", (event) => {
const report = event.currentTarget.parentElement.querySelector(".report");
report.classList.toggle("show");
})
)
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag .report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag .report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
.report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report" class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
I also changed “report” from being an ID to being a class as already noted since there is more than one instance.
You have a few bugs.
<div id="report"> you can't use the same id more than one time.
Javascript should be fired after page is loaded.
Read about function https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling
Try this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag .report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag .report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
.report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
</style>
</head>
<body>
<script>
window.addEventListener ( 'DOMContentLoaded', ()=>{
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) => {
console.log ( el );
el.addEventListener("click", (event) => {
const report = event.target.nextElementSibling;
report.classList.toggle("show");
console.log ( report );
});
});
} );
</script>
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
</body>
</html>
Your snippet leaves an opened .report visible until the user clicks .ellipsis again. It might be advantageous to use the MDN: The Details disclosure element as this element has a built-in 'open'/'close' mechanism, whithout the need for extra Javascript manipulation.
The pseudo code for your .card:
<card>
<details>
<summary></summary>
<report></report>
</details>
<content></content>
</card>
card { position : relative }
details { position : absolute; z-index: 1 }
summary { list-style: none } /* remove default marker */
summary::after { content : '\22ee' } /* custom ellipsis marker */
content { /* whatever fits the card*/ }
All you have to do is position the report (absolute) over the content (z-index: 1) when opened, while the browser handles the 'open/close' toggling. All <details> will retain their current [open] state until the user toggles it again by clicking the summary.
No specific Javascript required, however, should you decide that only one .report can be open at a time, you will need to implement Javascript to handle the closure of already opened .report. Below snippet shows how that could be implemented (with a checkbox to toggle the behavior on/off).
FYI, I removed the duplicate ID mentioned by others...
Here's how I would implement the above, using your example:
/*
When only one .report can be open at a time use
below Javascript, otherwise it can be safely removed.
*/
var currentDetail;
document.querySelectorAll('.card .flag summary').forEach(el => {
// this event triggers before <details> 'toggle' event
el.addEventListener("click", event => {
// if only one can be open, close the currently opened details
if (getComputedStyle(document.body).getPropertyValue('--only-one') == '1') {
const closest = event.currentTarget.closest('.card details');
if (closest.open) {
currentDetail = null; // all summaries closed
}
else { // not null and a different summary
if ((currentDetail) && (currentDetail != closest)) {
currentDetail.removeAttribute('open'); // close current open summary
};
currentDetail = closest; // save new opened summary
};
};
});
});
/* Just for checkbox operation: simply remove all 'open' attributes */
function collapseDetails() { document.querySelectorAll('.card details').forEach(el => { el.removeAttribute('open') }) };
body {
cursor: default; /* just the default arrow everywhere */
--only-one: 0; /* default false: all <details> can be [open] */
}
.main {
display: flex; flex-flow: row wrap; justify-content: center;
gap: 20px;
}
.card {
position: relative; /* new stacking context for '.report' */
/* For easy centering of content */
display: grid; place-items: center;
width: 150px; height: 200px;
background-color: coral; color: #fff;
border: 1px solid #000;
}
.flag { /* details */
position: absolute; z-index: 1; /* inside .card, on top of content */
inset: 0 10px auto 55px; /* shorthand for top/right/bottm/left */
/* .report 80px wide (given the .card width, margin, etc.) */
}
.flag[open] { /* details 'open' specific styling */ }
.ellipsis { /* summary */
list-style: none; /* remove HTML default triangle marker */
width: max-content; /* HTML default is equal to <details> width */
margin-left: auto; /* force to right side of .flag */
margin-right: -5px;
font-size: 25px;
text-align: right; /* only relevant when width is set to a value */
cursor: pointer;
}
.ellipsis::after { content: '\22ee' } /* the vertical 'ellipsis' */
/* hex unicode as dec shows an Asian character */
.report { /* disclosed details content */
background-color: #fff; color: #000;
padding: 5px 0;
}
.report p {
margin: 0; /* remove HTML default margin */
padding: 2px 5px;
font-size: 10px; line-height: 1.1;
cursor: pointer;
}
/* demo stuff */
label {
display: inline-block;
margin: 1rem;
cursor: pointer;
}
/* All these still get overridden by Firefox */
summary:where(::before, ::after, ::marker, :active, :focus, :focus-visible),
::-moz-focus-inner, ::-moz-focus-outer {
outline: none !important;
border : 0 !important;
outline-color: transparent !important
}
<label>only one 'report' open at a time <input type="checkbox"
oninput="document.body.style.setProperty('--only-one', (this.checked) ? '1' : '0');
collapseDetails();">
</label>
<div class="main">
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
</div>
I am wanting to display a div .before() another if it does not contain a specific class within it. Though it seems simple enough, somehow I am not able to get it working...
Here's a snippet of the progress I've made so far:
$('.container > #content').not('.entry', function() {
$(this).before('<div class="noentry">No entries to display.</div>');
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Section With an Entry:</h1>
<div id="content">
<div class="entry">This is an entry.</div>
</div>
</div>
<div class="container">
<h1>Section Without an Entry:</h1>
<div id="content"></div>
</div>
The .not() method does not work as you are expecting. It only checks the immediate object for the .entry class. You need to search descendants. See the updated example below, you can use a .find().
Also, as noted in the comments above, you shouldn't duplicate ids, so I changed your content to a class.
$(function() {
$('.container > .content').each(function() {
if (!$(this).find(".entry").length) {
$(this).before('<div class="noentry">No entries to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Section With an Entry:</h1>
<div class="content">
<div class="entry">This is an entry.</div>
</div>
</div>
<div class="container">
<h1>Section Without an Entry:</h1>
<div class="content"></div>
</div>
What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example
You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}
I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>
Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>
So let's say I have something like this:
body {
background: #ffffff;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width: 100%
}
.td1,
.td2,
.td3 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #eeeeee;
font-size: 18px;
color: #000000;
width: 100%;
}
.td2,
.td3 {
border-top: none;
color: red;
}
<body>
<div class="table">
<div class="row">
<div class="td1">Here is some random text</div>
</div>
<div class="row">
<div class="td2">This is the text you see at first</div>
</div>
<div class="row">
<div class="td3">This is the text below the other div</div>
</div>
</div>
Now, what I would like to do is have the td2 text to show when you first see the page, but not the td3. Then when clicking the td2 div it makes a fadeout or slides upwards, and then reveal the td3 div and that text. In this particular case the div doesn't have to come back when re-clicking. It's just like a "one way ticket". Click, and it's gone forever.
What might be the easiest way to do this ?
You could use JQuery UI to get the fade effect, and register to click event on .td2 in order to update the DOM as per your requirement. Here's one way of doing it:
$(".td2").on("click", function(){
$(".td2").fadeOut();
$(".td3").fadeIn();
});
body {
background: #ffffff;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width:100%
}
.td1, .td2, .td3 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #eeeeee;
font-size: 18px;
color: #000000;
width:100%;
}
.td2, .td3 {
border-top: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery-ui.min.js"></script>
<div class="table">
<div class="row">
<div class="td1">Here is some random text</div>
</div>
<div class="row">
<div class="td2">This is the text you see at first</div>
</div>
<div class="row">
<div class="td3" style="display:none">This is the text below the other div</div>
</div>
</div>
$('.td2').on('click', function() {
$(this).fadeOut(200).promise()
.done(function() {
$('.td3').fadeIn(200);
});
});
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width: 100%
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="row">
<div class="td1">
Here is some random text
</div>
</div>
<div class="row">
<div class="td2">
This is the text you see at first
</div>
</div>
<div class="row">
<div class="td3 hide">
This is the text below the other div
</div>
</div>
</div>
You will need to learn some javascript and some jQuery for this ;)
Add this to your css:
.td3{
display: none;
}
And write this javascript:
$('.td2').on( "click", function(){
$('.td2').fadeOut();
$('.td3').fadeIn();
});
Actually my balise section is under my image, or I want to superpose them ?
#demo {
margin: 0;
max-width: 350px;
text-align:center;
}
h2 {
margin: 0px;
padding:0px;
}
section {
border:1px solid #eee;
padding: 20px;
margin-top:-370px;
}
.credit {
margin-top:0px;
}
<img src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>
<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 15px auto">
<p>Exclusive / July 15, 2015
<br/>Serafima by Edwin S Freyer</p>
</div>
</article>
</section>
How can I do ?
Here is my jsfiddle: www.jsfiddle.net/kodjoe/ys484rpw/
I have given your image a class and set the image and demo section to position absolute with bottom 0
$('article').readmore({speed: 500});
#demo { margin: 0; max-width: 350px; text-align:center;}
h2 { margin: 0px; padding:0px;}
section { border:1px solid #eee; padding:20px!important;}
.credit { margin-top:0px; }
.abs, #demo {position:absolute; bottom:0; max-width:350px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://www.500milligrammes.com/facticemagazine/final/addon/news/readmore.js"></script>
<img class="abs" src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>
<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 0px auto">
<p>Exclusive / July 15, 2015<br/>
Serafima by Edwin S Freyer</p>
</div>
</article>
</section>
I think you should watch " z-index " and I think if you round all of the elements in a single div and add 'position: absolute'. Sorry for my english i'm a beginner.