I have been back and forth, back and forth and I'm sure there is a simple answer but this is starting to frustrate me.
What I need is a div box that can toggle upon clicking a button. This is for a chat script that will always stay in the bottom hand corner. I want the button to always be visible, and then if you click the button, the chat script will open. You can then hopefully minimize it by clicking the button again. I have got so close by playing around multiple times, but I need 2 divs (as the first div will contain the button which is always visible, and the second div will appear upon click).
UPDATE: The current script above opens and shuts the div with no problem. I just can't both the divs to follow the page when scrolling, despite them being "position:fixed;"
$(function() {
$('.button1').on('click', function() {
$('.initiallyHidden').toggle();
});
});
#calendar {
position: fixed;
bottom: 0;
right: 0;
float: right;
}
}
#initiallyHidden {
position: fixed;
bottom: 0;
right: 0;
float: right;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendar">
<button class="button1">Quick Chat</button>
</div>
<div class="initiallyHidden" style="display: none;">
<iframe src="'.$url.'" marginheight="0" marginwidth="0" scrolling="yes" allowtransparency="yes" frameborder="0">
</div>
The current script above opens and shuts the div with no problem. I just can't both the divs to follow the page when scrolling, despite them being position:fixed;.
Please help me.
$("#button1").on("click", ()=>{
$("#initiallyHidden").toggle();
});
#chatbox {
position:fixed;
bottom:0;
right:0;
float:right;
}
#initiallyHidden {
bottom:10;
right:0;
float:right;
width:100px;
height:100px;
border-style: solid;
background-color:white;
}
#content {
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox">
<div id="initiallyHidden" style="display: none;">
Chat box
</div>
<button id="button1">Quick Chat</button>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
Your CSS selectors are for IDs but your HTML elements have classes rather than IDs.
Inside your CSS you have #initiallyHidden instead of .initiallyHidden.
Same for calendar: #calendar instead of .calendar.
You have also an extra } inside your CSS
Remove the float:right property to the CSS too
$(window).on("load", function() {
$("#initiallyHidden").hide();
});
$( "#calendar" ).click(function() {
if($("#initiallyHidden").is(":visible")){
$("#initiallyHidden").hide();
}
else{
$("#initiallyHidden").show();
}
});
#calendar { position:fixed;
position: fixed;
bottom: 0;
right: 0;
float: right;
}
}
#initiallyHidden {
position:fixed;
bottom:0;
right:0;
float:right;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "calendar" type="button">Show calender!</button>
<div id = "initiallyHidden">
Calendr
</div>
Related
I'm trying to design a small menu and I really like this code. As you normally know, menus are closed when the page is first loaded. How can I make this animation closed when the page is first loaded? How can I start this animation in reverse?
$(document).ready(function(){
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
});
.box{
float:left;
overflow: hidden;
background: #f0e68c;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<body>
<button type="button" class="slide-toggle">Slide Toggle</button>
<hr>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
</div>
</body>
<html>
You can start with hidden .box by adding display: none:
$(document).ready(function() {
$(".slide-toggle").click(function() {
$(".box").animate({
width: "toggle"
});
});
});
.box {
float: left;
overflow: hidden;
background: #f0e68c;
display: none;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner {
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<body>
<button type="button" class="slide-toggle">Slide Toggle</button>
<hr>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam
ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
</div>
</body>
<html>
<div class="box" style="display:none">
When the menu is closed, it adds display: none property to the .box element. You have to add this style property to the .box element in HTML to make it look trapped on boot.
Through clicking on a button, I have succeeded in executing a transition of a div (through its 'height' property) to reveal some menu options. At the end of the transition, I would like the 'height' property to be set to 'auto', so that it can accommodate any change in content inside of it.
I have tried using 'max-height' in the following code but transition does not appear to work with 'max-height'. If I use 'height' then the transition works. I have tried to use javascript to set the 'height' property to 'auto' through another trigger after the transition, and then set it to its current height(not 'auto') before executing that transition to close the DIV , through a change in class, but this fails - i am guessing because setting the element height to any value takes precedence of any subsequent change in class that tries to change the same property. No JQUERY responses please.
CSS:
.sbox{
height: 0px;
transition: height 1s ease-out;
overflow: hidden;
}
.sboxopen{
max-height: 430px;
overflow: hidden;
transition: max-height 1s ease-out;
}
JAVASCRIPT:
'onclick' event
elem.className = 'sboxopen'; // Show boax
elem.className = 'sbox'; // Hide box
HTML:
<div class="sbox">
// CONTENT IN HERE
<div>
<button id="id">Show options</button>
Can you update your question with your html. Better if you can add a demonstration since it's not clear enough to understand the concept that you are expecting
As far as I can understand the question. I don't know whether I can solve your problem/requirement or not but still I have written a solution given below.
$("#toggle-box").click(function() {
if ($("#slider-box").hasClass("sbox")) {
$("#slider-box").attr("class", "sboxopen");
} else {
$("#slider-box").attr("class", "sbox");
}
})
#slider-box {
overflow: auto;
}
.sbox {
height: 0px;
transition: height 1s ease-out;
}
.sboxopen {
height: 200px;
transition: all 1s ease-out;
}
button {
margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="sbox" id="slider-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis mollis suscipit. Etiam pellentesque leo vel est tempus, nec interdum nisl commodo. In sagittis efficitur nulla pretium aliquet. Sed non urna nisl. Mauris nec metus nisl. In metus
nulla, semper vitae interdum sed, elementum sed libero. Vivamus posuere, turpis vel tempor aliquet, nibh est ullamcorper lorem, non sodales ex turpis non mauris. Proin hendrerit eget urna vitae tempor. Nunc eu nisi orci. Nulla et neque volutpat,
mattis neque nec, pretium nibh. In at maximus justo. Nunc aliquet ornare ante, id lobortis turpis convallis vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eu mauris et sem malesuada tempus
vel at nisi. Morbi ac erat vestibulum, fermentum urna nec, suscipit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam ac enim pharetra molestie. Quisque molestie pulvinar enim, et fermentum orci rhoncus id.
Praesent ultricies, diam quis aliquet faucibus, mauris risus lobortis quam, nec interdum arcu nunc ac ipsum. Nam malesuada suscipit dui non scelerisque. Aenean pretium pretium congue. Vivamus viverra, leo et rutrum commodo, nunc libero accumsan
erat, id facilisis velit dolor condimentum urna. Cras cursus accumsan diam ac scelerisque. Donec dapibus, urna eu posuere venenatis, tortor diam vestibulum augue, sit amet consectetur metus ligula in turpis.
</p>
</div>
<div>
<button id="toggle-box">Toggle Box</button>
</div>
</body>
</html>
I am trying to add top bar on a webpage which has 2 other elements that are top:0 and position:fixed. For example, think of a website with wp-admin bar and a menubar fixed on top.
I am creating a plugin & so I cannot modify the website's code, but can override styles.
Here is my CSS:
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
}
I can see the bar but the others are hidden under it. What I would like for them is to 'move down'. I could add custom css and find the elements' css and add margins, but since this is a plugin, it should work on any website. So I cannot add site-specific styles.
Ideally, this should behave like the mozbar chrome addon, which adds a topbar as an iframe.
Is this possible? Any help would be highly appreciated.
Thank much.
body {
background-color: white;
margin: 0;
padding: 0;
padding-top: 90px;
}
.fixed-bar {
width: 100%;
position: fixed;
top: 0;
height: 40px;
line-height: 40px;
text-align: center
}
.bar-1 {
background-color: gold;
}
.bar-2 {
background-color: pink;
margin-top: 40px;
}
.my-bar {
background-color: blue;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
}
<div class="fixed-bar bar-1">
fixed bar one
</div>
<div class="fixed-bar bar-2">
fixed bar two
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales libero enim, sed convallis leo ornare eget. Nullam condimentum, diam ullamcorper sollicitudin fringilla, eros nisi placerat tellus, at volutpat velit felis eu ipsum. Suspendisse sed
nisl a orci dapibus euismod et eget odio. Maecenas elementum erat elit, et efficitur ex feugiat ac. Nam convallis blandit nisl, finibus pretium tortor vehicula at. Sed ultricies finibus consectetur. Nulla nec diam a velit pellentesque consequat ut
a lorem. Fusce eget massa lorem. In egestas risus non nisi condimentum facilisis. Quisque vulputate est ut odio vestibulum, at vulputate tellus lacinia. Ut interdum magna id velit lacinia, nec lobortis velit consequat. Ut et malesuada risus. In interdum
eleifend est auctor tincidunt. Nulla facilisi. Proin faucibus ex euismod, porta purus ut, volutpat nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis volutpat tempus. Vivamus condimentum velit in
lacus ultrices ultricies. Morbi bibendum mauris ac pretium sagittis. Duis eget augue dapibus, convallis ante ut, accumsan ligula. Morbi cursus tellus viverra justo rutrum lobortis
</div>
<div class="my-bar">
this has to be on the top of any generic page
</div>
I ended up adding a margin-top to fixed elements at render and on scroll events.
My main top bar is rendered as <div id="appbar-container">...</div> id (to avoid being pushed too). Then I do it like that:
const APPBAR_HEIGHT = 64;
const translateFixed = () => {
Object.assign(document.body.style, {
position: "relative",
top: APPBAR_HEIGHT + "px",
});
for (let e of Array.from(document.body.getElementsByTagName("*"))) {
if (
e instanceof HTMLElement &&
e.getAttribute("id") !== "appbar-container"
) {
const position = getComputedStyle(e)
.getPropertyValue("position")
.toLocaleLowerCase();
const top = e.getBoundingClientRect().top;
if (position === "fixed" && top >= 0 && top <= APPBAR_HEIGHT) {
e.style.marginTop = APPBAR_HEIGHT + "px";
e.classList.add("appbar-offset");
} else if (e.classList.contains("appbar-offset")) {
e.style.marginTop = "0";
}
}
}
};
// Initial push
translateFixed();
// Push on scroll
document.addEventListener("scroll", translateFixed);
I am not very proud of it though to be honest and I think there is room for improvement... But, well, it works.
If you know the height of your bar, you can wrap all the content of the page with your own block, add some margin above it, and then add your bar using JS. Also it would be nice to set a background color to your bar. Here is an example using jQuery:
$('body').children().wrapAll('<div class="bar-render-content" />');
$('body').prepend('<div class="bar-render-top">Test bar</div>');
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
margin-bottom:50px;
background-color: lightgrey;
}
.bar-render-content
{
margin-top:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="any">
Any text
</div>
<div class="content">
Lorem ipsum porttitor malesuada fusce adipiscing gravida eu sit tellus nam justo sem metus, elementum lorem adipiscing. Enim commodo malesuada porttitor ultricies diam, auctor congue sodales eros sem quisque, risus magna donec integer, lorem donec diam magna vivamus. Adipiscing bibendum pellentesque curabitur orci proin tempus sapien amet: lorem tempus. Quam nam, ipsum magna justo nam lorem nam, eu a fusce donec sed eget metus mauris ligula sagittis rutrum ultricies non at. Sed quisque lectus duis, ut magna malesuada: vivamus — in sagittis porta tempus: curabitur odio — magna risus, sapien — elementum, maecenas porttitor risus integer.
Urna amet orci auctor elementum, magna justo arcu a auctor bibendum sem proin auctor amet justo metus morbi odio maecenas porttitor. Porta magna integer porttitor tellus eros nec ultricies magna rutrum curabitur, porttitor integer nam, sem non orci non nulla.
</div>
</body>
I am trying to create a sticky navigation using jquery. My navigation quickly jump to the top while the header is not yet fully hidden or scrolled to the top. I want the header to be fully scrolled to the top before the navigation stick to its position.
question: How can I make the navigation stick to its position after the header flow is completely hidden to the top after scrolling?
This is my jsfiddle link http://jsfiddle.net/rodgefhi/577br99o/ illustration.
This is my code
<style type="text/css">
.clearer {
clear: both;
margin: 0;
padding: 0;
}
.header {
width: 84%;
margin: 0 auto;
}
.dummy-content {
width: 10%;
margin: auto;
}
.fixed {
position: fixed;
top: 0;
}
.nav-placeholder {
width: 84%;
margin: 0 auto;
background: transparent;
height: auto;
}
nav {
width: 84%;
background: red;
}
nav ul li {
list-style: none;
float: left;
padding: 10px;
text-align: center;
}
nav ul li:hover {
cursor: pointer;
background: white;
}
</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var navOffset = $("nav").offset().left;
$("nav").wrap('<div class="nav-placeholder"></div>');
$(".nav-placeholder").height($('nav').outerHeight());
$(window).scroll(function() {
var scrollPos = $(window).scrollTop();
$(".value").html(scrollPos);
if (scrollPos >= navOffset) {
$("nav").addClass("fixed");
} else {
$("nav").removeClass("fixed");
}
});
});
</script>
<div class="header">
<p>this is header</p>
<p>this is header</p>
<p>this is header</p>
<p>this is header</p>
<p>this is header</p>
</div>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div class="clearer"></div>
</nav>
<div class="value"></div>
<div class="dummy-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
Thanks!
You are getting the left offset using this:
var navOffset = $("nav").offset().left;
I think you want the top value:
var navOffset = $("nav").offset().top;
Updated Fiddle: http://jsfiddle.net/577br99o/8/
if you want you can hide the header and then in the callback function add the fixed class or remove it something like this
$(document).ready(function() {
var navOffset = $("nav").offset().left;
$("nav").wrap('<div class="nav-placeholder"></div>');
$(".nav-placeholder").height($('nav').outerHeight());
$(window).scroll(function() {
var scrollPos = $(window).scrollTop();
$(".value").html(scrollPos);
if (scrollPos >= navOffset) {
$('.header').slideUp(500,function(){
$("nav").addClass("fixed");
});
} else {
$('.header').slideDown(500,function(){
$("nav").removeClass("fixed");
});
}
});
});
i hope it helps
I copied a content slider and im trying to make it work. Can anyone help me to make it work? Thanks.
What i need is when you click the button next, next2, next3 it will display designated text as it shown below.
http://codepen.io/kevin11/pen/Byxvqa
HTML:
<section class="demo">
<button class="next">Next</button>
<button class="prev">Next2</button>
<button class="prev2">Next3</button>
<div class="container">
<div style="display: inline-block;" >
Sample Text
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
<div>
Sample Text2
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
<div>
Sample Text3
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
</div>
</section>
CSS:
.container {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
left: 5px;
width:150px;
height:100px;
}
.prev {
left: 5px;
top:125px;
width:150px;
height:100px;
}
.prev2 {
left: 5px;
top:235px;
width:150px;
height:100px;
}
Here's a way to make a content slider with minimal JavaScript. The number of <a>s should be the same as the number of <div class="content">s.
$(function() {
$('.slider nav a').on('click', function() {
show_content($(this).index());
});
show_content(0);
function show_content(index) {
// Make the content visible
$('.slider .content.visible').removeClass('visible');
$('.slider .content:nth-of-type(' + (index + 1) + ')').addClass('visible');
// Set the tab to selected
$('.slider nav a.selected').removeClass('selected');
$('.slider nav a:nth-of-type(' + (index + 1) + ')').addClass('selected');
}
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
background: #596283;
font: 14px Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
border: none;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
}
.slider {
margin: 0px 20px;
position: relative;
background: #EFF1E4;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
width: 100%;
}
.slider nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
background: #AD9897;
color: #6C5D5D;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
width: 150px;
}
.slider nav a {
padding: 20px 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
.slider nav a:hover,
.slider nav a.selected {
background: #6C5D5D;
color: #AD9897;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.slider .content {
padding: 20px 0px;
position: absolute;
top: 0px;
left: 150px;
color: #6C5D5D;
width: 0px;
height: 100%;
overflow: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.slider .content.visible {
padding: 20px;
width: calc(100% - 150px);
overflow: scroll;
opacity: 1;
}
.slider .content p {
padding-bottom: 8px;
}
.slider .content p:last-of-type {
padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<nav>
<a>Content #1</a>
<a>Content #2</a>
<a>Content #3</a>
</nav>
<div class="content">
<p>Content #1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis magna ipsum, nec sodales lectus rutrum eleifend. Mauris laoreet tincidunt erat, nec mattis tellus luctus ac. Vivamus et pulvinar felis, a placerat dui. Aenean ornare, ipsum vel aliquet mattis, ante nibh rhoncus erat, in auctor tortor libero quis diam. Cras non purus eget enim dapibus pharetra. Integer eget commodo nisi. Quisque sed pharetra sapien. Suspendisse potenti. Aliquam ligula elit, fermentum a ex ac, porttitor fermentum velit. Phasellus quis lacinia nunc. Sed risus neque, venenatis in libero ac, auctor sagittis neque. Suspendisse hendrerit magna in sem mattis eleifend. Praesent vitae hendrerit est.</p>
<p>Nunc sit amet ante quis eros convallis dictum. Sed pretium viverra vehicula. Fusce elementum sagittis nulla, sed mollis enim cursus sed. Donec quis magna ultrices tellus consectetur pharetra vel vitae lorem. Proin eu fringilla ligula, non mollis felis. Cras scelerisque faucibus auctor. Ut auctor rutrum consectetur. Suspendisse in luctus risus. Nam condimentum, est placerat posuere commodo, libero elit maximus turpis, quis auctor mi risus a mauris. Donec rutrum, tortor sit amet viverra lobortis, nisi est varius libero, eget vestibulum arcu ex lacinia augue. Integer diam tellus, interdum vitae tellus in, accumsan suscipit velit. Sed ut blandit mauris. Etiam ac arcu eget nisi placerat feugiat. Sed laoreet, diam id iaculis tincidunt, turpis ex tristique felis, eu varius sapien lectus at justo. Donec sit amet congue erat. Curabitur nibh neque, dapibus ac placerat nec, maximus sollicitudin est.</p>
</div>
<div class="content">
<p>Content #2</p>
<p>Donec quis tortor vehicula, auctor elit nec, consequat urna. Curabitur hendrerit ipsum erat, fringilla vehicula velit lacinia eget. Suspendisse scelerisque volutpat sapien, et hendrerit est lobortis vitae. Curabitur et ultrices nibh. Sed molestie sagittis ante et gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sit amet ex tincidunt, vulputate lectus at, malesuada nibh.</p>
<p>Morbi semper, sem non scelerisque pulvinar, felis sapien accumsan quam, a viverra lorem eros et massa. Sed sed tincidunt nunc. Pellentesque semper vulputate lacus eget laoreet. Curabitur ultricies sem ut ullamcorper gravida. Cras ut ex ut dolor blandit sollicitudin vel eu tortor. Nulla pulvinar vulputate rutrum. Quisque ligula quam, aliquam pharetra enim non, scelerisque ullamcorper metus. Integer ullamcorper eros eu magna sagittis tempor. Quisque lacus ante, sagittis luctus efficitur quis, varius a nunc. Nulla risus ante, blandit sit amet dictum id, tempor sit amet leo. Morbi nec eleifend elit.</p>
</div>
<div class="content">
<p>Content #3</p>
<p>Nulla vitae nulla felis. Donec efficitur arcu id turpis auctor blandit. Cras consequat efficitur eleifend. Phasellus vel justo lectus. Mauris sed lacus ex. In vulputate, tortor ac interdum dapibus, lorem tortor interdum diam, vitae fermentum felis nisi id neque. Integer diam elit, ultricies quis suscipit sit amet, rutrum a nulla.</p>
<p>Donec quis ipsum magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean varius ante sed eros tristique fermentum. Duis sed vulputate tellus, in auctor tellus. Donec sed tempus odio. Nunc hendrerit erat nec dui sollicitudin, et ullamcorper enim mattis. Quisque accumsan rutrum turpis ut suscipit. Mauris mi ex, iaculis sit amet dui non, faucibus pellentesque eros. Fusce et congue urna, ac ultricies ipsum. Ut accumsan euismod felis, vel ornare lectus dictum ut. Aenean eget velit vulputate, placerat ligula et, maximus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>