We Keep Coding

Blur the entire html when the sub-menu is open

I created a submenu using HTML and CSS. The elements of the submenu open when hovered on the elements of nav-list. I need help figuring out how to blur the HTML's main content when the nav-list hovers and sub-menu is open. When open, the submenu will have a picture below it and multiple pictures and classes further down. The current code does blur the HTML, but the problem is, to blur the entire HTML, I need to add each class below the submenu to CSS individually.
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
}
.sub-menu {
display: flex;
position: absolute;
box-sizing: border-box;
background-color: black;
visibility: hidden;
top: 3.89rem;
left: -4rem;
width: 82.5rem;
height: 35rem;
z-index: 5000;
}
.sub-menu a {
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.nav-list>li:hover .sub-menu {
visibility: visible;
}
.nav-list>li:hover>a::after {
width: 100%;
}
/* CSS for blur effect */
.blurred::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
filter: blur(5px);
/* adjust the blur amount */
z-index: 900;
visibility: hidden;
}
<div class="main" id="navbar">
<div class="logo">
XYZ<br>123
</div>
<nav class="menu">
<ul class="nav-list">
<li>
Men
<ul class="sub-menu">
<li>shirts </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="main">
<img></img>
<img></img>
<img></img>
<img></img>
</div>
<footer>
1
</footer>
<script>
var subMenu = document.querySelector('.sub-menu');
var main = document.querySelectorAll('main');
subMenu.addEventListener('mouseover', function() {
main.forEach(function(elem) {
elem.classList.add('blurred');
});
});
subMenu.addEventListener('mouseout', function() {
main.forEach(function(elem) {
elem.classList.remove('blurred');
});
});
</script>

You only need to add the blurred class to the main container div, all content will be blurred in it.
Demo for blur on hover over hamburger (you can change that to blur only on sub-menu hover). There is a 2 sec delay on mouse-out to that you have time to scroll down to see the blurred image:
const hamburger = document.getElementById('hamburger');
const main = document.getElementById('mainContainer');
hamburger.addEventListener('mouseover', function() {
main.classList.add('blurred');
});
hamburger.addEventListener('mouseout', function() {
setTimeout(() => main.classList.remove('blurred'), 2000);
});
.blurred {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background-color: #eee;
}
<div class="main" id="navbar">
NAVBAR mouse over to blur ==> <span id="hamburger">☰</span>
<hr />
</div>
<div class="main" id="mainContainer">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis blandit felis vel hendrerit. Morbi nunc augue, pellentesque eu laoreet in, bibendum nec sem.</p>
<ul><li>In eu libero eget nulla laoreet aliquet in quis augue.</li><li>Praesent vulputate leo tellus, quis eleifend purus viverra vitae.</li><li>Phasellus eget augue venenatis, facilisis nulla sed, consequat lorem.</li></ul>
<p>Duis sapien diam, dignissim quis imperdiet eget, hendrerit nec nulla. Nam nisi purus, ultrices nec fringilla vitae, interdum vitae nunc.</p>
<p><img src="https://via.placeholder.com/500x90/000000/FFFFFF.png?text=This+is+an+embedded+image" /></p>
<p>Integer lobortis tellus a orci ultrices, at varius risus fermentum. Maecenas maximus elit sit amet varius facilisis. Morbi molestie rutrum eros, id molestie dui maximus in. Etiam fermentum felis eu vehicula euismod.</p>
</div>
<footer>
<hr />
FOOTER
</footer>

fade out transition for .mouseout using .animate?

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>

Have different <p> tag value show up in a separate div when you click each separate section

long time listener, first time caller. I am trying my hand at making an NHL draft chart, as I do some player evaluation and want a fancy looking place to put it all/I'm having a bit of fun while I learn SASS for the first time (it rocks, btw).
Codepen: https://codepen.io/trjwaugh/pen/abONgLm
$desktop: 1000px;
$padding: 15px;
$borders: 15px;
$margin: 20px;
$logo-clip: polygon(70% 0, 100% 0%, 75% 100%, 40% 100%);
$colors: ( ggold: #FFB81C, gold-light: lighten(#FFB81C, 40%), //buf, cbj, edm, fla, nsh
bblue: #002654, blue-light: lighten(#002654, 40%), ragsblue: #0038A8, ragsblue-light: lighten(#0038A8, 40%), leafblue: #00205B, leafblue-light: lighten(#00205B, 40%), rred: #C8102E, red-light: lighten(#C8102E, 40%), oorange: #F74902, orange-light: lighten(#F74902, 40%), starsgreen: #006847, starsgreen-light: lighten(#006847, 40%), yotesred: #8C2633, yotesred-light: lighten(#8C2633, 40%), burg: #6F263D, burg-light: ligthen(#6F263D, 40%), black: black);
#function color($color-name) {
#return map-get($map: $colors, $key: $color-name);
}
#mixin desktop {
#media (max-width: #{$desktop}) {
#content;
}
}
body,
html {
height: 100%;
font-family: 'Montserrat', sans-serif;
}
img {
margin: 0;
display: block;
width: 78px;
height: 80px;
float: right;
}
body {
margin: 0;
#bg {
clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
#include desktop {
//suff to change re: responsiveness
}
}
}
main {
#container {
white-space: nowrap;
text-align: center;
}
section#sticky-main {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
width: 100%;
margin: 1em auto;
padding: $padding;
border-radius: $borders;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
}
section#card {
margin: 1em auto;
float: right;
padding: $padding;
border-radius: $borders;
width: 100%;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
transition: .5s ease-in;
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
li {
strong {
display: inline-block;
margin-left: max(40px);
margin-top: 10px;
}
img {
display: block;
width: 138px;
height: 130px;
float: right;
#include desktop {
//suff to change re: responsiveness
width: 100px;
height: 92px;
}
}
}
}
#report.one {
margin: 1em auto;
float: right;
padding: $padding;
margin-right: 20px;
border-radius: $borders;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
width: 90%;
background-color: white !important;
color: black !important;
}
#report.one:hover {
display: block;
}
}
section#card.gold:hover {
background-color: color(ggold);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
section#card.blue:hover {
background-color: color(bblue);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
section#card.red:hover {
background-color: color(rred);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/9969435508.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-sm-4">
<section id="sticky-main">
<div id="content"></div>
</section>
</div>
<div class="col-sm-8">
<section onmouseover="hover()" id="card" class="gold">
<ul>
<li>
<img src="logos/anaheim-ducks.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
</section>
<section onclick="showReport()" id="card" class="red">
<ul>
<li>
<img src="logos/chicago-blackhawks-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report-two" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
<section onclick="showReport()" id="card" class="blue">
<ul>
<li>
<img src="logos/columbus -bluejackets-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
<section onclick="showReport()" id="card" class="blue">
<ul>
<li>
<img src="logos/columbus -bluejackets-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
</div>
</div>
</div>
</main>
<!-- Optional JavaScript -->
<script src="script.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
If you look at the Codepen, you can see i have a bunch of sections, all will act as a card that a players draft info will appear, minus a paragraph blurb about them. There are a few things ive tried in terms of accomplishing my goal but essentially I want to be able to click on a players <section onclick="showReport()" id="card"... and have that players paragraph blurb appear in the sticky div on the left, changing based on which section card you click on. right now I have the players paragraph in a p tag within the section just for now, but im open to anything. I have a JS function on click in there for now but what I have tried so far required me to write a seperate hide() for each section (will be 31 total). Im looking for a method that will also allow me to only change the bio info and never have to adjust any code when I want to make edits to my draft chart. I hope I explained myself well enough, please tell me if I need to clarify.
Any help would be highly appreciated!

First, add this to each onclick on sections to get the element itself anytime you click on them.
...
<section onclick="showReport(this)" id="card" class="blue">
...
Then, you can use this (now turned into el variable) to find the text and put into the #content element.
function showReport(el) {
$('#content').text($(el).find('p').text());
}

Display a Modal on button click using Jquery

I want to display my Modal on button click. Below is my code.
<input type="button" id="button1" value="Button" onclick="myFunction()"/>
<div id="openModal" class="modalDialog">
<div>
X
<h2>
Modal Box</h2>
<p>
Hello world</p>
</div>
</div>
This is my unfinished script.
<script type="text/javascript">
$(document).ready(function () {
});
</script>

show openModal div on button1 click.
$('#button1').on('click', function() {
$('#openModal').show();
});
No need of onclick="myFunction()" on button

Let's try...
Simple popup model created by using jquery, HTML, and CSS.
$(function() {
// Open Popup
$('[popup-open]').on('click', function() {
var popup_name = $(this).attr('popup-open');
$('[popup-name="' + popup_name + '"]').fadeIn(300);
});
// Close Popup
$('[popup-close]').on('click', function() {
var popup_name = $(this).attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
});
// Close Popup When Click Outside
$('.popup').on('click', function() {
var popup_name = $(this).find('[popup-close]').attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
}).children().click(function() {
return false;
});
});
body {
font-family:Arial, Helvetica, sans-serif;
}
p {
font-size: 16px;
line-height: 26px;
letter-spacing: 0.5px;
color: #484848;
}
/* Popup Open button */
.open-button{
color:#FFF;
background:#0066CC;
padding:10px;
text-decoration:none;
border:1px solid #0157ad;
border-radius:3px;
}
.open-button:hover{
background:#01478e;
}
.popup {
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
width:100%;
height:100%;
display:none;
}
/* Popup inner div */
.popup-content {
width: 500px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px;
margin-top: 20px;
box-shadow: 0px 2px 6px rgba(0,0,0,1);
border-radius: 3px;
background: #fff;
position: relative;
}
/* Popup close button */
.close-button {
width: 25px;
height: 25px;
position: absolute;
top: -10px;
right: -10px;
border-radius: 20px;
background: rgba(0,0,0,0.8);
font-size: 20px;
text-align: center;
color: #fff;
text-decoration:none;
}
.close-button:hover {
background: rgba(0,0,0,1);
}
#media screen and (max-width: 720px) {
.popup-content {
width:90%;
}
}
<!DOCTYPE html>
<html>
<head>
<title> Popup </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup
Preview</a>
<div class="popup" popup-name="popup-1">
<div class="popup-content">
<h2>Model </h2>
<p>Model content will be here. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aliquam consequat diam ut tortor
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
convallis. Integer at metus eget neque hendrerit vestibulum.
Aenean vel mattis purus. Fusce condimentum auctor tellus eget
ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
</div>
</div>
</body>
</html>

Change show() to modal.show();
$('#button1').on('click', function() {
$('#openModal').modal('show');
});

You probably have to set visibility:hidden; to the div, and set it to visible onclick

Expand element and contract element with animation, according to text size

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>