How do I add an expand/collapse transition?
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
} else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
.more {
display: none;
padding-top: 10px;
}
a.showLink,
a.hideLink {
text-decoration: none;
-webkit-transition: 0.5s ease-out;
background: transparent url('down.gif') no-repeat left;
}
a.hideLink {
background: transparent url('up.gif') no-repeat left;
}
Here is some text.
<div class="readmore">
Read more
<div id="example" class="more">
<div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
<p>Hide</p>
</div>
</div>
http://jsfiddle.net/Bq6eK/1
This is my solution that adjusts the height automatically:
function growDiv() {
var growDiv = document.getElementById('grow');
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
var wrapper = document.querySelector('.measuringWrapper');
growDiv.style.height = wrapper.clientHeight + "px";
}
document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more';
}
#more-button {
border-style: none;
background: none;
font: 16px Serif;
color: blue;
margin: 0 0 10px 0;
}
#grow input:checked {
color: red;
}
#more-button:hover {
color: black;
}
#grow {
-moz-transition: height .5s;
-ms-transition: height .5s;
-o-transition: height .5s;
-webkit-transition: height .5s;
transition: height .5s;
height: 0;
overflow: hidden;
}
<input type="button" onclick="growDiv()" value="Read more" id="more-button">
<div id='grow'>
<div class='measuringWrapper'>
<div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit
amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>
</div>
I used the workaround that r3bel posted: Can you use CSS3 to transition from height:0 to the variable height of content?
this should work, had to try a while too.. :D
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID + '-hide').style.display = 'inline';
document.getElementById(shID).style.height = '100px';
} else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID + '-hide').style.display = 'none';
document.getElementById(shID).style.height = '0px';
}
}
}
#example {
background: red;
height: 0px;
overflow: hidden;
transition: height 2s;
-moz-transition: height 2s;
/* Firefox 4 */
-webkit-transition: height 2s;
/* Safari and Chrome */
-o-transition: height 2s;
/* Opera */
}
a.showLink,
a.hideLink {
text-decoration: none;
background: transparent url('down.gif') no-repeat left;
}
a.hideLink {
background: transparent url('up.gif') no-repeat left;
}
Here is some text.
<div class="readmore">
Read more
<div id="example" class="more">
<div class="text">
Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<p>
Hide
</p>
</div>
</div>
OMG, I tried to find a simple solution to this for hours. I knew the code was simple but no one provided me what I wanted. So finally got to work on some example code and made something simple that anyone can use no JQuery required. Simple javascript and css and html. In order for the animation to work you have to set the height and width or the animation wont work. Found that out the hard way.
<script>
function dostuff() {
if (document.getElementById('MyBox').style.height == "0px") {
document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;");
}
else {
document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;");
}
}
</script>
<div id="MyBox" style="height: 0px; width: 0px;">
</div>
<input type="button" id="buttontest" onclick="dostuff()" value="Click Me">
http://jsfiddle.net/Bq6eK/215/
I did not modify your code for this solution, I wrote my own instead. My solution isn't quite what you asked for, but maybe you could build on it with existing knowledge. I commented the code as well so you know what exactly I'm doing with the changes.
As a solution to "avoid setting the height in JavaScript", I just made 'maxHeight' a parameter in the JS function called toggleHeight. Now it can be set in the HTML for each div of class expandable.
I'll say this up front, I'm not super experienced with front-end languages, and there's an issue where I need to click the 'Show/hide' button twice initially before the animation starts. I suspect it's an issue with focus.
The other issue with my solution is that you can actually figure out what the hidden text is without pressing the show/hide button just by clicking in the div and dragging down, you can highlight the text that's not visible and paste it to a visible space.
My suggestion for a next step on top of what I've done is to make it so that the show/hide button changes dynamically. I think you can figure out how to do that with what you already seem to know about showing and hiding text with JS.
Here's a solution that doesn't use JS at all. It uses checkboxes instead.
You can hide the checkbox by adding this to your CSS:
.container input{
display: none;
}
And then add some styling to make it look like a button.
Here's the source code that I modded.
Related
Is it possible to give max-height and max-width to an image while preserving aspect ratio without using js?
For example,
I want an image to be with a height of 38px and the width auto.
If the width is higher than 200px, I want the width to be 200px and the height auto.
If it's not possible without js, does anyone have an idea how to do it with js and without resizing the image after it's already loaded?
You can nest the image in a 200x38 container, then set the max-width and max-height of the image to 100%. Here is a working snippet (I have included JS to make it interactive, but it is not necessary. Try resizing the container using the sliders):
var width = document.getElementById("width");
var height = document.getElementById("height");
var widthInput = document.getElementById("widthInput");
var heightInput = document.getElementById("heightInput");
var imageContainer = document.querySelector("div");
widthInput.addEventListener("input", function() {
width.innerHTML = this.value + "px";
imageContainer.style.width = this.value + "px";
});
heightInput.addEventListener("input", function() {
height.innerHTML = this.value + "px";
imageContainer.style.height = this.value + "px";
});
div {
width: 200px;
height: 200px;
border: 1px dashed #000;
}
.image {
display: block;
max-width: 100%;
max-height: 100%;
background: #333;
}
<div>
<img class="image" src="https://via.placeholder.com/400"/>
</div>
<br/>
<label>Width: <span id="width">200px</span></label>
<br/>
<input id="widthInput" type="range" min="0" max="400"/>
<br/>
<label>Height: <span id="height">200px</span></label>
<br/>
<input id="heightInput" type="range" min="0" max="400"/>
You can notice that however you change the dimensions of the container, the image is still contained within it. By setting the container to 200px wide by 38px tall, you can force the image to stay within the limits 0px ≤ width ≤ 200px and 0px ≤ height ≤ 38px.
There is a built in CSS style called max-width and max-height and I really do not think min-width exists, incase you are wondering. You can refer to the example below to understand better. Also I am using text instead of an image, but you should get the idea.
I have nested the actual div instead another div so you could play around with the resizing.
#con {
resize: both;
overflow: auto;
}
#box {
/*Here you could say auto instead*/
height: 200px;
max-width: 200px;
}
<!DOCTYPE html />
<html>
<head></head>
<body>
<div id="con">
<div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus auctor ipsum, in convallis mi lobortis in. Phasellus molestie suscipit rutrum. Duis et convallis lectus. Etiam id urna massa. Nulla sagittis erat nec arcu rutrum elementum. Vestibulum blandit erat vestibulum, ullamcorper augue vitae, accumsan mi. Sed consectetur, quam vel efficitur interdum, ante ligula interdum justo, a dictum ligula tortor sed nunc. Cras eget magna ac urna imperdiet laoreet eget sed ante. Vivamus condimentum tortor sit amet diam elementum malesuada sed sed neque. Vestibulum et magna mollis, consequat nibh ut, facilisis orci. Phasellus fermentum sodales libero, et vehicula enim ornare ut. Donec non bibendum metus. Cras hendrerit, quam a pellentesque varius, tortor nunc maximus lectus, at gravida diam ipsum ut metus. Etiam orci felis, dapibus id cursus eu, dapibus ut augue. Proin a leo viverra, tempus ipsum nec, lacinia lacus. Maecenas id dolor nec neque lobortis interdum quis quis nisi.</div>
</div>
</body>
</html>
Using both width auto and height auto will give to following code. To center horizontal I used the align-items center of the flexbox.
.container,
.container * {
box-sizing: border-box;
}
.container {
display: flex;
width: 800px;
margin: 10px auto;
}
.img {
display: flex;
align-items: center;
width: 25%;
height: 150px;
border: 2px solid silver;
}
.img img {
display: block;
border: 0;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
margin: auto;
}
<div class="container">
<div class="img">
<img src="http://placekitten.com/200/300" alt="">
</div>
<div class="img">
<img src="http://placekitten.com/300/200" alt="">
</div>
<div class="img">
<img src="http://placekitten.com/250/350" alt="">
</div>
<div class="img">
<img src="http://placekitten.com/350/200" alt="">
</div>
</div>
You have to use max-width and height and object-fit CSS properties for image.. see example
.img img {
max-width: 200px;
height: 38px;
object-fit: contain;
object-position: left;
}
<div class="img"><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png"></div>
Hope it works... if any question comment pls
Here are 2 examples of the solution I think would work, the first image has less than width: 200px; and the second one has more than width: 200px;
Again, I'm not sure if it would work for you, but I think it would, and if it doesn't I would love to know why.
<style>
img {
max-width: 200px;
height: auto;
}
</style>
<img src="https://dummyimage.com/180x400/666/fff.jpg" alt="test">
<br>
<img src="https://images.pexels.com/photos/5686476/pexels-photo-5686476.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="test 2">
Specifying height or width will keep the aspect ratio. Specifying both the max-height and max-width will keep the aspect ratio. Specifying height and max-height makes no sense. Specifying height and max-width cannot guarantee your aspect ratio.
I have a div that when you hover, another div shows up. They aren't parent/child or wrapped, so I used a script to get this to work the easiest I could and to have what I needed. With .mouseover the hover div slowly appears which is what I want.
My issue is getting the .mouseout to make the hover div slowly disappear and stay gone. I've tried different variations but the closest I got is to make the div slowly fade away, but it pops back up after the delay I had set.
I'm very new to js, really no experience at all. I wrote the first part of this code which works but the .mouseout is what I'm having issues with.
Here's my code:
$("#show_stats1 h1").mouseover(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 200); });
$("#show_stats1 h1").mouseout(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1}, 200); });
I know it's probably simple, but I don't know much if anything about js.
Here is the html:
<div id="show_stats1" class="stats">
main, visible div
</div>
<div class="stat-1_info" style="visibility:hidden;">
hidden div to be shown on hover
</div>
Here's a jsfiddle https://jsfiddle.net/yt3h9xnf/
You can use the .animate() method with either opacity or visibility. There is no reason to use both.
If you can't figure out which one to use read this answer here.
$("#show_stats1 h1").mouseover(function() {
$(".stat-1_info").animate({opacity: 1}, 200);
});
$("#show_stats1 h1").mouseout(function() {
$(".stat-1_info").animate({opacity: 0}, 200);
});
.stat-1_info {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="show_stats1" class="stats">
<h1>main, visible div</h1>
</div>
<div class="stat-1_info">
hidden div to be shown on hover
</div>
Make it simple by using fadeIn() and fadeOut() with sec as parameter. This will take care of the time you want to see the text and want to disappear.
Use display:none; which is latest and best in market now than using visibility property.
fadeIn()
fadeOut()
$(document).ready(function() {
$("#show_stats1 h1").mouseover(function() {
$(".stat-1_info").fadeIn(3000); // Choose your own time(3sec)
});
$("#show_stats1 h1").mouseout(function() {
$(".stat-1_info").fadeOut(2000); // Choose your own time(2sec)
});
});
.stats_container {
width: 310px;
padding: 10px;
margin-bottom: 0px;
}
.stats {
width: 300px;
height: 34px;
margin: 15px 0px -3px 0px;
}
.stats h1 {
text-align: left;
}
.stats h2 {
position: absolute;
left: 260px;
margin-top: 8px;
width: 50px;
text-align: right;
}
.stats h1 {
display: inline-block;
font-weight: 400;
color: #000;
line-height: 9.5pt;
font-size: 9.5pt;
}
.stat-1_info {
top: -50px;
margin: 0px;
}
.stat-1_info {
float: right;
position: relative;
left: 0px;
display: inline-block;
width: 380px;
height: 334px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stats_container">
<div id="show_stats1" class="stats">
<h1>Strength:</h1>
</div>
</div>
<div class="stat-1_info" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam
ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
</div>
Here is what I am trying to do,
I want to add a JavaScript event handler so that when the user moves the mouse cursor onto the content element, a timeout timer is started that will set the opacity of the payWall element to 1.0 – three second later.
Then I want to dd another JavaScript event handler so that when the user clicks the subscribe button, an alert box appears with the message “Subscribing now.”
When the alert is OK-ed, the payWall slides down the page and out of sight. I think I will need to set an interval timer so that the payWall moves down like 2 pixels every 30 milliseconds.
I am not sure how to do it, I tried my best, but if someone can please help me, I would really appreciate it.
function init()
{
document.getElementById("subscribe").onclick = function()
{
}
}
window.onload=init;
* {
margin: 0;
box-sizing: border-box;
}
body {
font: 1em Verdana, sans-serif;
background-color: antiquewhite;
}
h2, h4 {
text-align: center;
}
#header {
border-bottom: 2px solid black;
font-size: 2.5em;
padding: 0.5em 0;
height: 100px;
}
#footer {
border-top: 2px solid black;
padding: 1em 0;
}
#header, #footer {
text-align: center;
background-color: #CCC;
}
#leftnav, #rightnav {
position: absolute;
width: 20%;
padding-top: 3em;
}
#rightnav{
left: 80%;
}
#wrapper {
background-color: dodgerblue;
overflow: hidden;
}
#content div {
border: 1px solid black;
border-radius: 10px;
padding: 0.5em;
margin-bottom: 10px;
background-color: #ccc;
}
#content div:last-child {
margin-bottom: 0px;
}
#content div:hover {
border-color: dodgerblue;
background-color: white;
}
#content {
padding: 0.5em;
margin: 0 20%;
border-left: 2px solid black;
border-right: 2px solid black;
background-color: white;
}
/* ---------------------------------------------------------*/
#payWall {
background-color : darkseagreen;
font-size: 2em;
opacity: 0.5;
}
<body>
<div id="header">
The Header
</div>
<div id="wrapper"> <!-- Can be used to apply bg colour -->
<div id="leftnav">
<h4> Left</h4>
</div>
<div id="rightnav">
<h4> Right</h4>
</div>
<div id="content">
<div>
<h2> Article 1 </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse ultricies condimentum velit vel scelerisque.
</p>
</div>
<div>
<h2> Article 2 </h2>
<p>
Mauris sagittis aliquam odio vitae pulvinar.
Suspendisse id dolor nibh, sed consectetur sem.
Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
</p>
</div>
<div>
<h2> Article 3 </h2>
<p>
Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
Mauris sagittis aliquam odio vitae pulvinar.
Suspendisse id dolor nibh, sed consectetur sem.
Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
</p>
</div>
</div> <!-- end of content -->
</div> <!-- end of wrapper -->
<div id="footer">
<h3>
The End
</h3>
<div id="payWall">
For further access please subscribe here. <br>
<button id="subscribe"> Subscribe</button>
</div>
</div>
</body>
First:
Use <div onmouseenter='setTimeout(doStuff, 3000)'> for a three second delay when the cursor enters the div
In JS:
Add a function, doStuff, which has the following code:
document.getElementById('payWall').style.opacity = '1';
document.getElementById('subscribe').onclick = function(){
alert("Subscribing now");
vanishPayWall();
}
One problem is that the payWall would just keep moving down the page. If you wanted it to disappear, you'd want to put overflow-y: hidden on the payWall, and shorten the paywall by 2px every time as well as setting the upper margin to 2px higher. Maybe something like
function vanishPayWall() {
var key = window.setInterval(function(){
var pw = document.getElementById('payWall');
pw.style.height = String(Number(pw.style.height.slice(-2)) - 2) + 'px';
pw.style.marginTop = String(Number(pw.style.height.slice(-2)) + 2) + 'px';
}, 25)
setTimeout(function(){
clearInterval(key)
}, Number(pw.style.height.slice(-2)) * 12.5)
}
Not absolutely sure this will work, but it should help out a bit.
I have created a design for my web page.
The issue I face is I am unsure how to create a smaller window popup, with my design.
The window will open up once I click on an image and display it's image on it with it's specific information.
I am unsure if I need some kind of JavaScript object to save their information.
This is kind of where I have started but I am lost.
I need the image based on which is clicked.
So to display the object I need to display it based on which image I click and unsure how.
Below is my design.
function Cupcakes(type, name, description, Price, cost, image){
this.type = type; //create an instant of object
this.name = name;
this.description = description;
this.Price = Price;
this.cost = cost;
thi.image = image;
this.displayInfo = function(){
var info ="<div class='divCell1' id = 'line1'>";
info += this.name + "</div><div class='divCell2' id = 'line2'>";
info += this.description + "</div><div class='divCell3' id = 'line3'>";
info += this.Price + "<div>Price <br>";
info += this.cost + "</div><div class = 'divCell4' id='line4'>";
info += this.image + "</div>";
return info;
}
}
// define an array to store products
var product_list = [];
var cart = [];
var cost = "Half Dozen: $7.00 <br> Dozen: $12.50 <br> Party Size [20 cupcakes]: $18.00"
var desc1 = ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus orci elit, lobortis nec neque in, condimentum gravida velit. Suspendisse maximus nisl et vehicula placerat. Sed elit turpis, venenatis sit amet tortor vel, interdum cursus mi.';
var image = " ";
var product = new Products('cupcake','Winter Festival', desc1, 15.99);
product_list.push(product);
Pop-ups are blocked on browsers by default. Use a div with position:fixed instead. You can hide/show it using display:none / display:inline-block
function show(){
var stats = document.getElementById("aa").style.display;
if (stats == "none"){
document.getElementById("aa").style.display = "inline-block";
} else {
document.getElementById("aa").style.display = "none";
}
}
body {
height: 100%;
background: honeydew;
}
#aa {
font-weight: bold;
position:fixed;
left:0;
right:0;
margin: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100px;
height: auto;
padding: 15px;
background: gold;
text-align: center;
box-sizing: content-box;
border: 4px dashed black;
}
button {
margin-right: 10px;
float: left;
color: white;
background: crimson;
padding: 15px;
}
#text {
text-align: justify;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
<div id=text><button onClick=show()>click</button> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.</div>
<div id=aa style="display:none">CONTENT</div>
Pure CSS solution with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
display: inline-block;
height: 80%;
width: 80%;
background: url('http://i.imgur.com/bv80Nb7.png');
background-repeat: no-repeat;
background-size: 100% 100%;
outline: 6px double teal;
}
.item {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
#warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left:0;
right:0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>CLICK HERE</b></p>
<div id=target class="item"><h1 id=warning>THE POP-UP CONTENT</h1></div>
</label>
You question is very very confusing.
Basic javascript (considering jQuery) for you:
You can save the information of each cupcake on it element. Like this:
<div class="cupcake" data-price="Half Dozen: $7.00..." data-description="My description">
[...]
</div>
<div class="cupcake" data-price="Half Dozen: $12.00..." data-description="My description 2">
[...]
</div>
and in jquery:
$(".cupcake").on("click", function(){
var price = $(this).data("price"); //Getting the price information
var desc = $(this).data("price"); //Getting the description information
//Here you can use all information, call functions and show your small popup
});
Based in what div you click, the variable price and desc will receive the correct information.
This is a little bit useful for you ?
If you want, please edit your question and try to be more specific, because I don't get your real problem. (Maybe it's my english)
The included snippet does almost all of what I want to do.
Click on the 'Toggle expanded' to see the elements expand to the larger size and then contract to the smaller size.
I have a few questions:
How can I contract the element whilst still filling it with text (not reducing the text to two lines until the end of the animation)?
Is it possible to achieve everything without needing to set the precise width and height in CSS that I am setting? It is currently fragile to style changes.
Is it possible to animate these boxes and have the text 'animate' as well? e.g. see the text re-wrapping as the boxes increase in size
Thanks!
$('#expand-link a').on('click', function(event) {
var $sections = $('.block');
if ($sections.data('expanded')) {
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.removeClass('expanded');
$sections.find('li').each(function() {
$(this).css('height', $(this).find('p:not(.fullview)').outerHeight() + 32);
});
$sections.removeClass('expandit');
$sections.data('expanded', false);
} else {
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.addClass('expanded');
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.addClass('expandit');
$sections.data('expanded', true);
}
});
li {
list-style: none;
background-color: white;
padding: 5px 5px 5px 5px;
margin-top: 10px;
margin-bottom: 10px;
transition: height 1s ease-in-out;
overflow-x: hidden;
overflow-y: hidden;
}
.expanded li {
width: 570px;
}
li:first-child {
margin-top: 0px;
}
li:last-child {
margin-bottom: 0px;
}
.section p {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.expanded .section p {
overflow: auto;
display: block;
}
ul {
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
overflow: hidden;
}
.section p.fullview {
display: none;
}
.expanded .section p.fullview {
display: block;
}
.block {
background-color: grey;
display: inline-block;
width: 300px;
transition: width 1s ease-in-out;
}
.block.expandit {
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="expand-link">
Toggle expanded
</div>
<div class="block">
<ul class="sections">
<li class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis massa mauris. Fusce vel efficitur elit. Curabitur finibus sagittis nisl. Nullam luctus, magna sed feugiat scelerisque, nunc sem facilisis enim, sed ornare nulla urna sit amet
lectus. Praesent facilisis efficitur ipsum sed gravida. Mauris mollis ut nisi at fringilla. Aenean et orci libero. Curabitur pharetra odio ornare metus pharetra aliquet. Nunc nisl lorem, tempus vitae libero a, feugiat viverra dui.</p>
<p class="fullview">Some extra content</p>
<p class="fullview">A bit more</p>
</li>
<li class="section">
<p>Some different less useful text</p>
<p class="fullview">A bit of extra content for your information</p>
</li>
</ul>
</div>