Skip to content

Instantly share code, notes, and snippets.

@adriano66

adriano66/Box-unfold-button-on-small-devices.html

Last active August 29, 2015 14:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adriano66/b6fc5aa16e7c7e4c969f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adriano66/b6fc5aa16e7c7e4c969f to your computer and use it in GitHub Desktop.
Download ZIP
Box unfold button on small devices // http://output.jsbin.com/damanu
Raw
Box-unfold-button-on-small-devices.html
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2015 by adriano66 (http://jsbin.com/damanu/3/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta name="description" content="[add your bin description]">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>Komenarze</title>
<style id="jsbin-css">
html, body {
background: #666;
}
* {
box-sizing: border-box;
}
.show-more {
display: none;
}
.show-all {
height: auto!important;
}
/* small devices styles */
@media screen and (max-width: 500px) {
.comment {
height: 5em;
}
/* use additional dom element instead of ::after, ::before pseudoelemts to gain ability to manipulate them */
/*.comment::after,*/
.show-more {
background-color: inherit; /*inherit bg color from parent */
bottom: 0;
content: " [ ... ]";
height: 1.2em;
padding: 0 0 0 1em;
position: absolute;
/* width: 100%; /* for auto placement after the box content*/
/* if we want dots to appear at the same place everytime */
right: 0;
width: 4em;
}
/*.comment:hover::after,*/
.show-more:hover {
cursor: pointer;
}
/* overwriting ::after z-index */
.show-more {
background-color: red!important;
z-index: 10;
display: inline!important; /* be sure to overwrite display property on mobile */
}
}
/* big screen styles */
/* commment wrapper for paddings */
.comment-wrapper {
padding: 1em;
margin-bottom: 1em;
font-size: 14px;
border-bottom: 2px solid #ccc;
background: #fff;
}
/* comment content */
.comment {
overflow: hidden;
position: relative; /* hide overflowing content */
text-overflow: ellipsis; /* add elipsis to overflowing content */
word-wrap: break-word; /* break long lines*/
background-color: inherit; /* inherit wrapper background */
}
</style>
</head>
<body>
<h1 style="color: #fff;">Komentarze </h1>
<div class="comment-wrapper">
<div class="comment">ZZZZZZZZZZZZZZZwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwWWWWWWWWWWWWWWWWWWWWWWWWWWZZzzzzzzzzzzzzzzzZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwWWWWWWWWWWWWWWWWWWWWWWWWWWZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwWWWWWWWWWWWWWWWWWWWWWWWWWWLorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi quaerat, autem, mollitia velit ducimus iure rerum voluptas. Quam omnis quasi, possimus tempore mollitia reiciendis, hic error quaerat, adipisci soluta fugiat. Ad, corporis. Nulla, quibusdam reprehenderit animi. Sequi autem doloribus inventore nisi necessitatibus optio ipsa, provident at ipsum maiores dolore, modi, similique saepe. Quod repudiandae similique placeat cum sapiente quaerat facilis consequuntur eos eaque sint cumque voluptatum dolorum maxime ad omnis reprehenderit, deleniti ipsa explicabo aliquam numquam beatae consequatur tempora commodi aliquid! Quibusdam odio sunt, ab ut eaque voluptates quae consectetur aut. Dicta, nihil sunt soluta similique iste officia id.<span class="show-more">+</span></div>
</div>
<div class="comment-wrapper">
<div class="comment">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore deleniti amet rerum nisi voluptatibus expedita dolorum nihil architecto earum sapiente harum tenetur illo, ab, dolor odit porro vitae repudiandae at nemo laborum perspiciatis debitis non quisquam. Doloribus laborum at accusantium aperiam dolorum quod hic harum illo quisquam magnam voluptatibus sequi, recusandae officia, amet unde, corrupti est mollitia nam quis corporis modi repellat facere et nemo in. A, debitis! Natus impedit amet incidunt, vel accusamus nihil. Nam corporis, dolorem ipsa, laudantium ullam, odit explicabo quidem rerum delectus modi animi, provident? Minima dolorum, in quae quibusdam officia praesentium cupiditate consequatur architecto corporis.<span class="show-more">+</span></div>
</div>
<div class="comment-wrapper">
<div class="comment">Quia numquam dolorum corporis explicabo, sapiente nesciunt amet quas veritatis dolores rerum, minus in debitis non incidunt, culpa necessitatibus ea officia soluta error iste commodi voluptatum. Dolores doloribus, modi ea quaerat id voluptates, reiciendis illo impedit tenetur ducimus culpa at, vero. Architecto eligendi nam iure voluptatum impedit qui error, ipsam dicta natus placeat saepe, consequuntur aliquid? Aliquid autem nisi quos dolorum dolore voluptatum amet placeat porro veritatis quod nesciunt obcaecati iure earum similique ad, quae provident omnis! Ipsum modi fugiat delectus necessitatibus impedit qui omnis tempore, enim autem deleniti repellendus provident debitis assumenda accusamus est quibusdam, cupiditate possimus, porro eius.<span class="show-more">+</span></div>
</div>
<div class="comment-wrapper">
<div class="comment">Impedit possimus saepe, eaque, nobis dolore doloremque veniam pariatur quidem, earum maiores asperiores placeat consectetur fugit aspernatur libero tenetur accusantium. Nostrum voluptas sequi adipisci eligendi placeat tempora modi ipsa maiores tempore. Saepe corporis necessitatibus, nobis omnis explicabo soluta deleniti nihil aspernatur. Dolore, cumque iure sequi omnis itaque ex temporibus excepturi explicabo dicta doloremque dolores est consequatur quibusdam iusto tenetur, dignissimos soluta sit dolorem ab consequuntur illo. Tenetur temporibus, corporis doloremque facere necessitatibus minus? Voluptas distinctio, rem repellat voluptatibus, provident eligendi, ipsa accusamus consectetur quibusdam nesciunt quis hic nobis magnam. Vitae quasi placeat quibusdam porro assumenda, aliquid, a voluptatem distinctio velit?<span class="show-more">+</span></div>
</div>
<div class="comment-wrapper">
<div class="comment">Enim saepe tenetur reiciendis. In doloremque aliquam quas veritatis at quidem corporis molestiae, repellendus rerum cumque incidunt assumenda, quia nobis maiores voluptates dolore cum sit modi deserunt, debitis expedita atque. Fuga alias dicta nam eligendi unde quam numquam iste eos similique, sequi nobis excepturi voluptates libero, blanditiis deserunt. Expedita doloremque nulla et aspernatur odio amet? Ex, repudiandae quod perferendis. Doloribus sed voluptas distinctio maxime laboriosam, inventore a, natus quo! Placeat nulla voluptate iusto dignissimos! Eos odio esse vitae quibusdam neque quam quia, fugit laborum. Facilis recusandae magni praesentium similique impedit ipsa consectetur, officia optio, nobis error laudantium. Asperiores quibusdam, odit.<span class="show-more">+</span></div>
</div>
<div class="comment-wrapper">
<div class="comment">Illo perspiciatis pariatur voluptatibus vero, nam tempore ducimus natus voluptatum quasi dicta, perferendis maxime recusandae. Iusto veritatis rem optio eum, reprehenderit! Quod voluptatem perferendis commodi nulla quaerat dolor molestias ab doloremque quas consequatur, laborum quae quasi dicta necessitatibus id ipsam nobis perspiciatis molestiae debitis tenetur, consectetur exercitationem, numquam est doloribus? Ab obcaecati mollitia, suscipit provident voluptatibus minima, sint expedita laborum dolores saepe qui temporibus quibusdam laboriosam iste, nobis aspernatur odio cumque impedit. Temporibus sed accusamus tenetur deleniti perspiciatis atque placeat corporis expedita cupiditate optio iusto modi iure itaque, natus veritatis, ab fuga. Iste explicabo hic suscipit, molestiae quidem eius incidunt.<span class="show-more">+</span></div>
</div>
<script id="jsbin-javascript">
$('.comment-wrapper').on('click', '.show-more', function (e) {
e.preventDefault();
var $this = $(this),
comment = $this.parent('.comment');
comment.addClass('show-all');
$this.addClass('active').html('...mniej');
});
$('.comment-wrapper').on('click', '.show-more.active', function (e) {
e.preventDefault();
var $this = $(this),
comment = $this.parent('.comment');
comment.removeClass('show-all');
$this.removeClass('active').html(' wiecej...');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment