Polymer - Multiple accordions using computed bindings - javascript

I am trying to replicate the multiple iron-collapses in my app like the example but running into problems:
https://elements.polymer-project.org/elements/iron-collapse?view=demo:demo/index.html&active=iron-collapse
The error I get is:
[my-app::_createEventHandler]: listener method `_expandClicked('#collapse1')` not defined
The Markup
<a>
<span>Parent Link 1</span>
<paper-icon-button icon="expand-more" role="button" on-click="_expandClicked('#collapse1')"></paper-icon-button>
</a>
<iron-collapse id="collapse1">
<a class="link" href="/view2">Sport F</a>
<a class="link" href="/view3">Child C</a>
</iron-collapse>
The Function
_expandClicked: function(selector) {
document.querySelector(selector).toggle();
// Don't propagate to the anchor link.
event.preventDefault();
event.stopImmediatePropagation();
}
Any ideas?
Thanks!

When setting up an annotated event listener, the value must be the method name only. You could pass a function argument as a data attribute that your event listener could read.
// template
<paper-button on-tap="_toggleCollapse" data-selector="#collapse1">
// script
_toggleCollapse: function(e) {
const selector = e.target.dataset.selector;
this.$$(selector).toggle();
}
HTMLImports.whenReady(() => {
"use strict";
Polymer({
is: 'x-foo',
_toggleCollapse: function(e) {
// Assume e.target is the paper-button or an immediate child
const selector = e.target.dataset.selector || e.target.parentElement.dataset.selector;
if (selector) {
this.$$(selector).toggle();
}
}
});
});
<head>
<base href="https://polygit.org/polymer+1.6.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
<link rel="import" href="iron-icons/iron-icons.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
:host {
font-family: Roboto, Noto, sans-serif;
}
section {
margin-top: 20px;
}
paper-button {
background: #eee;
width: 100%;
text-transform: none;
justify-content: flex-start;
font-size: 18px;
}
.content {
margin-left: 6px;
padding: 15px;
border: 1px solid #dedede;
width: calc(100% - 34px);
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
</style>
<section>
<paper-button on-tap="_toggleCollapse" data-selector="#collapse1">
<span>Collapse #1</span>
<iron-icon icon="expand-more"></iron-icon>
</paper-button>
<iron-collapse id="collapse1">
<div class="content">
Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
</div>
</iron-collapse>
</section>
<section>
<paper-button on-tap="_toggleCollapse" data-selector="#collapse2">
<span>Collapse #2</span>
<iron-icon icon="expand-more"></iron-icon>
</paper-button>
<iron-collapse id="collapse2">
<div class="content">
Pro saepe pertinax ei, ad pri animal labores suscipiantur. Modus commodo minimum eum te, vero utinam assueverit per eu, zril oportere suscipiantur pri te. Partem percipitur deterruisset ad sea, at eam suas luptatum dissentiunt. No error alienum pro, erant senserit ex mei, pri semper alterum no. Ut habemus menandri vulputate mea. Feugiat verterem ut sed. Dolores maiestatis id per. Pro saepe pertinax ei, ad pri animal labores suscipiantur. Modus commodo minimum eum te, vero utinam assueverit per eu, zril oportere suscipiantur pri te. Partem percipitur deterruisset ad sea, at eam suas luptatum dissentiunt. No error alienum pro, erant senserit ex mei, pri semper alterum no. Ut habemus menandri vulputate mea. Feugiat verterem ut sed. Dolores maiestatis id per.
</div>
</iron-collapse>
</section>
</template>
</dom-module>
</body>
codepen

Related

changing the brightness of a web page using the slider

have a task in front of me - when changing the slider parameters to change the brightness of the entire page, I tried the option with a full-screen div, but it blocked access to the rest of the elements, I also tried to set the filter parameter for the body, but in this case the page construction went wrong
All you need to do is either use a filter: brightness(..) on <body>, make clever use of your website colors using hsl(..) colors and change their lightness value or a mix of both methods.
All can easily be done with a range slider modifying a single --brightness custom variable with one line of Javascript. Just en/disable the various options as mentioned in the CSS.
Just as a reminder: without a proper minimal reproducible example no one on SO will be able to help you with your specific issue...
I created a small demo showcasing the above:
/*
Custom variable to hold overall brightness percentage
modified with the range slider min [0.25] max [1.75]
default value [1].
Modified with slider "oninput" JS...
*/
html { --brightness: 1 }
.webpage {
margin-top: 3rem;
/* Default color setting */
background-color: hsl(0,0%, 41.2%); color: hsl(0,0%, 100%);
/* Override by changing (L)ightness parameter of HSL color */
background-color: hsl(0,0%, calc(var(--brightness) * 41.2%)); color: hsl(0,0%, calc(var(--brightness) * 100%));
/* disable when using filter */
/* Modify overall brightness */
/* filter: brightness(var(--brightness)); /* enable to see difference with HSL */
/* Modify overall brightness and invert B/W */
/* filter: brightness(var(--brightness)) invert(var(--brightness)); /* enable to see difference with HSL */
}
/* Extras, just to make the demo look good */
/********************************/
/* some convenient global rules */
/********************************/
*, ::before, ::after { box-sizing: border-box }
html, body { width: 100%; max-width: 100% }
html { scroll-behavior: smooth }
body { min-height: 100vh; margin: 0; line-height: 1.5 }
/************************************************/
/* element responsive behavior [STABLE] */
/************************************************/
/* https://codepen.io/renevanderlende/pen/YzEaKvO?editors=1100 */
/* responsive base font size using y = mx + b 'y-intercept form' => y = 0.00625x + 12 */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
body { font-size: 1rem; line-height: 1.5 }
/* Generic page spacers, root font size independent, also y = mx + bs
T/B: (360,0)(2160, 90) => y = 0.05x - 18 <= base 90, 72 at 1920x1080
L/R: (640,0)(1920,448) => y = 0.35x - 224 <= base 160, 360x640 full screen
*/
:root { --min-pad: 1rem }
[padded] { padding: max(var(--min-pad),calc(5vmin - 18px))
max(var(--min-pad),calc(35vw - 224px)) }
[padded="1"] { padding: var(--min-pad) } /* minimal padding */
[padded="0"] { padding: 0 } /* no padding */
label {
position: fixed; top: 0; width: 100%;
display: inline-flex; flex-direction: column;
background-color: white;
cursor: pointer;
}
<label>Brightness <input type="range" min="0.25" max="1.75" value="1" step="0.01"
oninput="javascript:document.documentElement.style.setProperty('--brightness', this.value)"> </label>
<div padded class="webpage">
<h2>Lorem Ipsum dolor...</h2>
<p>Lorem ipsum dolor sit amet, mel omnium vulputate percipitur ex. Ex vel quas inani appellantur. Iusto dolore cetero duo ad. Per facer mediocrem eu. An legimus voluptatibus eam, cetero aperiri consectetuer sit id, hinc sale evertitur cum ei.
</p>
<p>
Erant maiorum iracundia ius ne. Veri summo clita in usu, possim apeirian interesset usu no. Malorum repudiandae cu eum, ad vel putant torquatos. Idque feugait aliquando his eu, sed te sanctus omittam placerat. Ex eum ridens euismod facilisis, sea id lorem reformidans complectitur.
</p>
<p>
Qui purto elitr at, at corrumpit signiferumque mea. Vix quidam consulatu ei, no esse vocibus convenire usu, est te erroribus imperdiet. Soleat molestiae deseruisse ei sea, ea sale mollis nam. Ut eam eius vidit consulatu.
</p>
<p>
Amet justo ex mel. Utroque accusata cu nam. Et vel mucius audiam rationibus, mea regione alterum ne. Perpetua persequeris te eos, no sale mnesarchum quo. Atomorum reformidans ea per, ne timeam tractatos philosophia usu.
</p>
<p>
Id vix atomorum scribentur. Sit habeo ancillae facilisi in. Purto tacimates no mei, in duo nemore senserit, inani debet ut mea. Eu homero timeam adversarium vis, vix molestie luptatum atomorum ei. Ut eos sumo atqui, sumo ponderum iudicabit vix ne, ea errem maiorum postulant sea.
</p>
<p>
Et nam putant ancillae, et vel luptatum vivendum efficiendi, eos diam nulla legendos an. Putent fastidii mediocritatem sit in. Id per odio delenit complectitur. Altera mentitum efficiendi ex usu, an veri tation partiendo quo. In nominavi recteque adversarium mel, duo suas populo eu.
</p>
<p>
Et integre facilisi sea, et agam utinam nam. Facilis laboramus democritum sit at, eos sint probatus iracundia an, duo ei eirmod malorum. Pro quem nihil aliquip at. Eum dico debet graece ut, has tamquam intellegat an.
</p>
<p>
Sea no magna dolores corrumpit. Nam nulla hendrerit te, vivendum dissentiet eu vix, at quas zril putent vim. Eu pro maiestatis incorrupte, has magna posse ei, pri cetero quaerendum ut. Autem justo atqui usu id, sumo ipsum fierent pro ea. Oporteat tacimates suavitate per ei, molestie delicata at pro, erant prompta quo no.
</p>
<p>
Id qui elit partiendo iracundia, ei eos nostrud graecis. No postulant ullamcorper signiferumque qui, eu pri augue vidisse eligendi, corpora iudicabit et eos. Ea purto impetus per, porro partiendo efficiendi ex mel. Cum vero eius epicuri eu. An virtute albucius nec, hinc ceteros referrentur cu mei, audiam admodum ad nam.
</p>
<p>
Mel albucius qualisque ut, mutat simul omnesque at vim, te eam minim bonorum. Iisque insolens atomorum nam et. No nihil epicuri efficiantur pro. No mel vide argumentum, nonumes interesset nec ex. Duis commodo placerat pro cu, mei laudem aliquip numquam ut, case latine salutatus eum ne. Ad tollit convenire mei, nam te amet eruditi conclusionemque.
</p>
</div>

CSS letter-spacing together with line-through

Is there any css/js solution how to center line through the text while using letter-spacing? While single line text it is possible to accomplish centered line-through thanks to pseudo element ::before or ::after, but that's not possible on block elements like <p> or <div>.
h2, p {
letter-spacing: 1em;
text-decoration: line-through;
text-align: center;
}
p {
letter-spacing: .5em;
}
<h2>Random text</h2>
<p>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</p>
Here is an idea where you can rely on background and box-decoration-break to create the line-through and you can easily adjust its size and position. You will basically remove one letter spacing from the total width.
It's important to note that the background need to be applied to an inline element:
p {
letter-spacing: .5em;
text-align:center;
}
p span {
background:
linear-gradient(#000,#000) /* Coloration */
0 calc(50% + 0.2ex) /* position */
/
calc(100% - .5em) 1px /* width height */
no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<p><span>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</span></p>

How to always show scrollbar of inner div when outer div has a smaller width

I have ended up in a scenario where the outer div has a definite height and width whereas the inner div has a definite height but an indefinite width. Like so:
html:
<div id="parent">
<div id="child">
</div>
</div
and css:
#parent{
width: 200px;
height: 200px;
overflow-x:scroll;
overflow-y:hidden
}
#child{
width: 400px;
height: 200px;
overflow-x:hidden;
overflow-y:scroll;
}
But as expected, I can see the scrollbar of inner div only when it has been scrolled to the extreme right.
I want to always show both scrollbars.
Please help me find a CSS solution or a plain js (non-jquery) solution.
https://jsfiddle.net/n2tfe2wr/
Try with this:
document.getElementById('child-size').style.width = document.getElementById('child-wrapper').scrollWidth+ 'px';
document.getElementById('parent').addEventListener('scroll', function () {
document.getElementById('child-wrapper').style.marginLeft = document.getElementById('parent').scrollLeft + 'px';
document.getElementById('child-wrapper').scrollLeft = document.getElementById('parent').scrollLeft;
})
#parent {
width: 200px;
height: 400px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
#child-wrapper {
width: 200px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
background-color: blue;
}
#child {
width: 400px;
color: white;
}
#child-size {
height: 1px;
opacity: 0;
}
<div id="parent">
<div id="child-size"></div>
<div id="child-wrapper">
<div id="child">
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
<br><br><br>
Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu,
legimus senserit definiebas an eos.
<br><br><br>
Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu,
eirmod consectetuer signiferumque eu per.
<br><br><br>
In usu latvine equidem dolores.
<br><br><br>
Quo no falli viris intellegam, ut fugit veritus placerat per.
</div>
</div>
<br><br>
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
<br><br><br>
Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu,
legimus senserit definiebas an eos.
<br><br><br>
Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu,
eirmod consectetuer signiferumque eu per.
<br><br><br>
In usu latvine equidem dolores.
<br><br><br>
Quo no falli viris intellegam, ut fugit veritus placerat per.
</div>

jQuery Combining toggle(), show() and hide() [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have this working exactly like I want (see the Fiddle below) except I discovered that toggle() was deprecated. I'm wondering if I could use toggleClass() or hide() and show() to toggle the visibility of the dropdownpanel.
$("#dropdown").click(function() {
$("#dropdownpanel").toggle();
});
$("#latinlink").click(function() {
$("#sometext").hide();
$("#latin").show();
});
$("#back").click(function() {
$("#latin").hide();
$("#sometext").show();
});
#dropdownpanel {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
#latin {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="dropdown">
Dropdown
</button>
<div id="dropdownpanel">
<p id="sometext">Click
here to read some latin...
</p>
</div>
<div id="latin">
<button id="back">
Back
</button>
<br /> Lorem ipsum dolor sit amet, epicuri argumentum constituam eum ea. Munere aliquip te nec, at nec dicat fuisset offendit, quo an sonet honestatis. Tempor facete sadipscing te his. Nam vivendo postulant reprehendunt te, offendit principes pri ex, at causae
oblique torquatos pro.
<br />
<br /> Libris philosophia has eu, nam iriure alienum intellegam at. Nec appareat electram ne, amet nonumes per te. Usu eu nisl verterem, labore regione legimus in nam, vel saperet laboramus voluptatibus ut. Ad eam altera nemore. No nobis corpora pro, qui
ex tale suas dissentias, et iisque omittam inciderint sit. Usu ut case menandri vituperata.
</div>
JSFiddle
The current behaviour is because when you click the #latinlink element it hides the #dropdownpanel, so then when you click the #dropdown button again it toggles #dropdownpanel from hidden to visible again, which is the same as what the #back button does.
The easiest way to fix that without changing the HTML at all is probably to update the #dropdown click handler to test whether #latin is currently visible:
$("#dropdown").click(function() {
if ($("#latin").is(":visible"))
$("#dropdownpanel").hide();
else
$("#dropdownpanel").toggle();
$("#latin").hide();
});
$("#latinlink").click(function() {
$("#dropdownpanel").hide();
$("#latin").show();
});
$("#back").click(function() {
$("#latin").hide();
$("#dropdownpanel").show();
});
#dropdownpanel, #latin {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="dropdown">
Dropdown
</button>
<div id="dropdownpanel">
<p>Click
here to read some latin...
</p>
</div>
<div id="latin">
<button id="back">
Back
</button>
<br /> Lorem ipsum dolor sit amet, epicuri argumentum constituam eum ea. Munere aliquip te nec, at nec dicat fuisset offendit, quo an sonet honestatis. Tempor facete sadipscing te his. Nam vivendo postulant reprehendunt te, offendit principes pri ex, at causae
oblique torquatos pro.
<br />
<br /> Libris philosophia has eu, nam iriure alienum intellegam at. Nec appareat electram ne, amet nonumes per te. Usu eu nisl verterem, labore regione legimus in nam, vel saperet laboramus voluptatibus ut. Ad eam altera nemore. No nobis corpora pro, qui
ex tale suas dissentias, et iisque omittam inciderint sit. Usu ut case menandri vituperata.
</div>
Alternatively you might change the HTML structure to put the #latin div inside the #dropdownpanel.
i added wrapper for #dropdownpanel and #latin. Reference here jsfiddle and moved styles from #dropdownpanel to #dropdowncontent
The issue was that the button was toggling an element that was not visible.
$("#dropdown").click(function() {
if ($('#dropdownpanel').is(':visible')) {
$("#dropdownpanel").hide();
} else if ($('#latin').is(':visible')) {
$("#latin").hide();
} else {
$("#dropdownpanel").show();
}
});
$("#latinlink").click(function() {
$("#dropdownpanel").hide();
$("#latin").show();
});
$("#back").click(function() {
$("#latin").hide();
$("#dropdownpanel").show();
});
#dropdownpanel {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
#latin {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="dropdown">Dropdown</button>
<div id="dropdownpanel">
<p>Click <button id="latinlink">here</button> to read some latin...</p>
</div>
<div id="latin">
<button id="back">Back</button><br> Lorem ipsum dolor sit amet, modo vitae latine id sea, ea illud facilis definitiones cum. Ei mea ignota iuvaret, debet verear adipiscing no mel, mel gubergren torquatos temporibus ex. Mei nemore mandamus et. Omnes
legimus principes pri et.<br>
<br> Nam eu odio facer cotidieque, cum in reque elitr fastidii. An duo hinc iisque principes, nostro mollis laoreet cu ius. No mel habeo soluta repudiare, ex qui tritani apeirian delicatissimi. Eos ei dolore option definitiones, ad sit liber scaevola
dissentiet.
</div>

Easy way to switch between content with jquery

I just made a script that shows/hides content with Jquery when you click on tabs above the content (it also changes the color of the tab that was clicked). Everything works fine (Result: https://jsfiddle.net/e572s3oq/embedded/result/) but i think there is an other way to switch between the content that makes it easier to add more tabs. I would be really glad if someone could help me. And i hope you understand my intention. (Please excuse my english and ask me if you have any remaining questions)
Here is my Code (I think only the jQuery code is relevant):
$(document).ready(function() {
$(".tab:first-child").click(function() {
$(".content p:nth-child(2)").css('display', 'none');
$(".tab:nth-child(2)").css('background-color', '#F5F7F7');
$(".tab:first-child").css('background-color', 'white');
$(".content p:first-child").css('display', 'block');
});
$(".tab:nth-child(2)").click(function() {
$(".content p:first-child").css('display', 'none');
$(".tab:first-child").css('background-color', '#F5F7F7');
$(".tab:nth-child(2)").css('background-color', 'white');
$(".content p:nth-child(2)").css('display', 'block');
});
});
body,
html {
padding: 0;
margin: 0;
background-color: #ecf0f1;
}
#wrapper {
width: 260px;
margin: auto;
margin-top: 100px;
}
.tab {
width: 130px;
height: 30px;
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 30px;
text-align: center;
color: #7f8c8d;
display: block;
float: left;
}
.tab:hover {
cursor: pointer;
}
.tab:first-child {
background-color: white;
}
.tab:nth-child(2) {
background-color: #F5F7F7;
}
.content {
width: 260px;
height: 300px;
background-color: white;
overflow: scroll;
}
.content p {
color: #7f8c8d;
font-size: 12px;
font-family: 'Lato', sans-serif;
margin-top: 8px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
}
.content p:first-child {
display: block;
}
.content p:nth-child(2) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
<div class="tab">
PAGE 1
</div>
<div class="tab">
PAGE 2
</div>
<div class="content">
<p>Content1</p>
<p>Content2</p>
</div>
</div>
This should do:
$('.tab').click(function() {
$('.content p').hide();
$('.tab').css('background-color', '#F5F7F7');
$(this).css('background-color', 'white');
$('.content p').eq($(this).index()).css('display', 'block');
});
What basically is happening is:
We first, by default, hide all the p elements within the .content div.
We also set background-color to #F5F7F7 for all the .tab elements.
Then, you can target the current .tab element by the use of $(this) and set its background-color to white.
Finally, we can target a particular p element within .content div by using the current .index() of the current .tab element and then we feed this .index() to another method of jQuery called .eq() which then gets us the desired p element.
Snippet:
$('.tab').click(function() {
$('.content p').hide();
$('.tab').css('background-color', '#F5F7F7');
$(this).css('background-color', 'white');
$('.content p').eq($(this).index()).css('display', 'block');
});
body, html {
padding:0;
margin:0;
background-color:#ecf0f1;
}
#wrapper {
width:260px;
margin: auto;
margin-top:100px;
}
.tab {
width:84px;
height:30px;
font-family:'Lato', sans-serif;
font-size:14px;
line-height: 30px;
text-align: center;
color:#7f8c8d;
display: block;
float: left;
background-color: #F5F7F7;
}
.tab:hover { cursor:pointer; }
.tab:first-child { background-color: white; }
.content {
width:260px;
height:300px;
background-color:white;
overflow: scroll;
}
.content p {
color:#7f8c8d;
font-size: 12px;
font-family:'Lato', sans-serif;
margin-top:8px;
margin-left:8px;
margin-right:8px;
margin-bottom:5px;
}
.content p:first-child {
display:block;
}
.content p:nth-child(2) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=wrapper>
<div class="tab">PAGE 1</div>
<div class="tab">PAGE 2</div>
<div class="tab">PAGE 3</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, ne lorem dolorem eos. His ex verear tincidunt, ea causae nominavi voluptua ius. Sit ne nibh qqqqqqdeserunt petentium, nam nisl volumus tincidunt ne. Ut vel dictas posidonium sadipscing, nominavi comprehensam duo no. Et quis prima exerci pro, idque ignota fastidii vel cu, id eum solet mollis definitionem. Habeo dolore postulant te pri, duo ut electram incorrupte, ea melius omittantur vel. Alii graeco bonorum pri et. Aliquip similique cum at. Ad per perfecto expetendis mediocritatem, pro percipitur ullamcorper complectitur ex. His falli aeque fierent cu, reque philosophia mel ex. Ad eum dicat platonem voluptatibus, eu vim alia adhuc justo, minimum consequuntur usu ex. Eos dolorem maiorum scaevola no, aliquid verterem ut per. Mea et feugiat vivendum, id graece iriure mel. Nihil debitis necessitatibus et nec. Ut has mazim option mandamus. Veri adipisci eloquentiam eos ea, soleat dissentiunt te mel, vel at debitis recteque petentium.</p>
<p>Id graece similique sea, ex duo dico dicam indoctum, nam animal tritani adversarium in. Eu mea veniam nonumes sententiae, ius iudico moderatius cu. Vidisse pericula suavitate vim ne, dicam neglegentur ei ius, ne illud viderer feugait his. Sit modus adolescens in, duo te amet suavitate tincidunt. Soleat signiferumque te per, no eos debet singulis neglegentur, cu vis natum falli expetendis. Vix tollit dicunt mediocrem eu, mei et equidem civibus. Eum dicat efficiantur definitionem ne. Ei mei wisi vidisse appetere. An sit nominavi lobortis, liber legimus epicuri sea an. Ne habeo ludus expetendis sit, ne posse tantas voluptaria nec, id elit volumus quaestio pro. Interpretaris conclusionemque ea eum, tollit insolens no mel Id graece similique sea, ex duo dico dicam indoctum, nam animal tritani adversarium in. Eu mea veniam nonumes sententiae, ius iudico moderatius cu. Vidisse pericula suavitate vim ne, dicam neglegentur ei ius, ne illud viderer feugait his. Sit modus adolescens in, duo te amet suavitate tincidunt. Soleat signiferumque te per, no eos debet singulis neglegentur, cu vis natum falli expetendis. Vix tollit dicunt mediocrem eu, mei et equidem civibus. Eum dicat efficiantur definitionem ne. Ei mei wisi vidisse appetere. An sit nominavi lobortis, liber legimus epicuri sea an. Ne habeo ludus expetendis sit, ne posse tantas voluptaria nec, id elit volumus quaestio pro. Interpretaris conclusionemque ea eum, tollit insolens no mel.</p>
<p>Lorem ipsum dolor sit amet, ne lorem dolorem eos. His ex verear tincidunt, ea causae nominavi voluptua ius. Sit ne nibh qqqqqqdeserunt petentium, nam nisl volumus tincidunt ne. Ut vel dictas posidonium sadipscing, nominavi comprehensam duo no. Et quis prima exerci pro, idque ignota fastidii vel cu, id eum solet mollis definitionem. Habeo dolore postulant te pri, duo ut electram incorrupte, ea melius omittantur vel. Alii graeco bonorum pri et. Aliquip similique cum at. Ad per perfecto expetendis mediocritatem, pro percipitur ullamcorper complectitur ex. His falli aeque fierent cu, reque philosophia mel ex. Ad eum dicat platonem voluptatibus, eu vim alia adhuc justo, minimum consequuntur usu ex. Eos dolorem maiorum scaevola no, aliquid verterem ut per. Mea et feugiat vivendum, id graece iriure mel. Nihil debitis necessitatibus et nec. Ut has mazim option mandamus. Veri adipisci eloquentiam eos ea, soleat dissentiunt te mel, vel at debitis recteque petentium.</p>
</div>
</div>
Modified a few styles in CSS and added more content in HTML for the above snippet. Hope this helps.

Categories

Resources