When I click a button on the sidebar, and if the current tab is the second tab the navigation tab is going to display the first tab as the second tab lost the focus. How can I keep the second tab in display while clicking a button on the sidebar?
the code is in jsfiddle
https://jsfiddle.net/98okrj0f/9/
The AngularJs scripts works at my local. Can anyone also tell me how to make it work in jsfiddle?
HTML Code here
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nav</title>
<link href="nav.css" rel="stylesheet"/>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<!-- -->
<body ng-app="App" >
<nav>
<ul> <span>My App</span>
<li class="sub">
Version
<ul>
<li class="sub">
V2
<ul ng-controller="V2Ctrl">
<li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</li>
</ul>
</li>
<li class="sub">
V3
<ul ng-controller="V3Ctrl">
<li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<aside class="side" align="left">
<table onclick="reply_click(event)" ng-app="App" ng-controller="TableCtrl" >
<tr ng-repeat = "table in tables">
<td><button id = "{{table}}" width = "70">{{table}}</button></td>
</tr>
</table>
</aside>
<article class="tabs">
<section id="erd">
<h2>ERD</h2>
<p>This content appears on tab ERD.</p>
</section>
<section id="col">
<h2>Columns</h2>
<p>This content appears on tab Columns.</p>
</section>
<section id="home">
<h2>Home</h2>
<p>This content appears on tab Home. lfkdgl;k lkfd;lkg ';lkfg ;lkg 'df;lk ;lk ';lk ';fdlkg ';fdlkg';dflk;ldfkg';lkdlfkdfkglkdf lkjhlsdjhfljdfhlkjdh jh jhkjdhfkjsdhf skjdhf lk h dsfjlkjsdlkfj;dslkfj dskfj;kj sdfkj fkdj;lfkjsd;lkfj sdkfj ;slkj sdfj;lskjf skdj flksjdf ; sdfkj ;sdlkfj dskfj sdkjfhueuu suehu heu he u heu heh ueh ufhu fhe uueh ush uhsudh ue huhuhufheuheu u heiu h euh eh ue </p>
</section>
</article>
<footer align="bottom">
<span>"Copyright© 2016 </span></span>
</footer>
<script>
var app = angular.module('App', []);
app.controller('TableCtrl', function($scope) {
$scope.tables = ['category','supplier','customer','dept','empl','orders'];
});
app.controller('V2Ctrl', function($scope) {
$scope.V2s = ['2.10','2.11','2.12','2.13','2.14','2.15','2.16','2.17','2.18','2.19','2.20','2.21','2.22','2.23','2.24','2.25','2.26','2.27','2.28'];
});
app.controller('V3Ctrl', function($scope) {
$scope.V3s = [' ',' SP1',' SP2',' SP3',' SP4',' SP5',' SP6',' SP7',' SP8',' SP9',' SP10'];
});
</script>
</body>
</html>
CSS code here.
#logo{
position: absolute;
right:10px;
bottom: 10px;
}
body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
padding: 0;
z-index: 9999;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
text-align: center;
}
na ul span {
width: 300px
margin-top: 250%;;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 1em;
/*padding: 0.5em 2em;*/
padding: 0.2em 3em;
text-decoration: none;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 1em;
padding: 0.2em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
nav li > ul > li ul {
display: none;
background-color: #888;
}
nav li > ul > li:hover > ul {
position:absolute;
display : block;
margin-left:100%;
margin-top:-3em;
}
nav ul > li.sub{
background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
nav ul > li.sub li.sub{
background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
/*****************************************************************************/
aside {
display: block;
position: absolute;
width: 80px;
height: 550px;
padding-right: 0;
margin: 0;
overflow: auto;
background-color: lightblue
}
article {
/* position: relative; */
}
article.tabs
{
position: relative;
display: block;
width: 1100px;
height: 500px;
margin: 2em;
margin-left:80px;
background-color: green;
}
article.tabs section
{
position: absolute;
display: block;
left: 0;
width: 1100px;
height: 500px;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.5em;
top: -1.5em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
/*
article.tabs section:nth-child(3) h2
{
left: 254px;
}*/
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.5em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
footer
{
color: #999;
text-align:center
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
the update jsfiddle.
https://jsfiddle.net/98okrj0f/13/
Since nobody answered you're question I will answer this question like I did the previous ones.
The problem was that you weren't closing you <a> tags with </a>. So the html added extra <a> tags with made the left bar also use a href which is used for your tabs. This way it overrided the open tab.
See the new JSfiddle: https://jsfiddle.net/98okrj0f/19/
Here's the code that was making the error's:
<li ng-repeat = "v2 in V2s">{{v2}}</li>
<li ng-repeat = "v3 in V3s">{{v3}}</li>
Related
I am using Jquery to show project categories and filter the projects by which category is selected.
View the code pen here: https://codepen.io/saintasia/pen/dzqZov
HTML:
<body>
<div class="container">
<nav>
<ul>
<li class="current">All projects</li>
<li>Front-end</li>
<li>Back-end</li>
<li>Apps</li>
<li>Design</li>
<li>Testing Testing Testing</li>
</ul>
</nav>
<div id="projects">
<h1 class="heading">All Projects</h1>
<ul id="gallery">
<li class="design"><img src="https://source.unsplash.com/jjtdL443L4w/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/b18TRXc8UPQ/700x700"></li>
<li class="apps design"><img src="https://source.unsplash.com/klRB1BB9pV8/700x700"></li>
<li class="front-end testing-testing-testing back-end"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="front-end design"><img src="https://source.unsplash.com/1vwwZ-BmmrE/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/WLOCr03nGr0/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/iOykDIkZLQw/700x700"></li>
</ul>
</nav>
</div>
<!-- modal gallery -->
<div class="gallery">
<a class="close" href="#">
<i>
<span class="bar"></span>
<span class="bar"></span>
</i>
</a>
<img src="">
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
body {
color: #333;
font-size: 13px;
background: #f4f4f4;
font-family: sans-serif;
overflow:auto;
}
.container {
width: 90%;
max-width: 960px;
margin: 30px auto;
position: relative;
text-align: center;
}
h1 {
margin-bottom: 20px;
text-transform: uppercase;
color: #F39CC3;
}
nav {
display: block;
width: 100%;
}
ul {
list-style: none;
margin-bottom: 20px;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
text-transform: uppercase;
padding: 4px 10px;
margin-right: 2px;
margin-left: 2px;
text-decoration: none;
color: #27A4DD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
border: 1px solid #27A4DD;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.hidden {
display: none;
}
nav > ul > li > a:hover, .current a {
color: #fff;
background-color: #27A4DD;
}
#projects > ul > li {
display: inline-block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
width: 23%;
height: auto;
cursor: pointer;
border-radius: 5px;
/* Padding stays within the width */
box-sizing: border-box;
position: relative;
opacity: 0.7;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#projects > ul > li:hover {
opacity: 1;
}
img {
max-width: 100%;
border-radius: 5px;
}
.gallery {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
padding: 40px 10px;
display: none;
box-sizing: border-box;
}
.gallery > img {
max-height: 100%;
width: auto;
}
.close i {
position: fixed;
top: 10px;
right: 10px;
height: 30px;
width: 30px;
}
.bar {
display: block;
position: absolute;
top: 13px;
float: left;
width: 30px;
border-bottom: 4px solid #fff;
transform: rotate(45deg);
}
.bar:first-child {
transform: rotate(-45deg);
}
#media (max-width: 768px){
#projects > ul > li {
width: 48%;
}
}
#media (max-width: 568px) {
#projects > ul > li {
width: 100%;
}
}
JS:
$(document).ready(function(){
// filter
$('nav a').on('click', function(event){
event.preventDefault();
// current class
$('nav li.current').removeClass('current');
$(this).parent().addClass('current');
// set new heading
$('h1.heading').text($(this).text());
// filter link text
var category = $(this).text().toLowerCase().replace(' ', '-');
// remove hidden class if "all" is selected
if(category == 'all-projects'){
$('ul#gallery li:hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#gallery li').each(function(){
if(!$(this).hasClass(category)){
$(this).hide().addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
// lightbox
$('ul#gallery a').on('click', function(event){
event.preventDefault();
var link = $(this).find('img').attr('src');
$('.gallery img').attr('src', '');
$('.gallery img').attr('src', link);
$('.gallery').fadeIn('slow');
});
// close lightbox
$('.gallery').on('click', function(event){
event.preventDefault();
$('.gallery').fadeOut('slow');
});
});
The problem I am having is that if a category is more than 2 words, it doesn't show the projects with that category. You'll see in the code pen that there is a category called "Testing Testing Testing" and one of the projects has that category assigned to it. But, when you click the Testing Testing Testing category, no projects show up. All of the other categories work however, because they are all only 2 words long.
Any help is greatly appreciated!
Your code break because the .replace(' ', '-') code just replace the first space
if you want to change all space with '-', you should change this code
var category = $(this).text().toLowerCase().replace(' ', '-');
to this
var category = $(this).text().toLowerCase().split(' ').join('-');
My objective is to have a single-page website. My current issue is with the nav bar at the top of the page. When I click on one of the links in my nav list, it takes me down the page, but it keeps overshooting.
For example, if I click on my second nav li it takes me down the page, but ends up beneath the text in that div. It's the same with the third and fourth pages: the page scrolls down just barely beyond where I want it to end up, i.e., perfectly in line with the start of the title of each page.
HTML:
<body>
<div id="home"> <!--MAIN DIV TO TAKE YOU BACK TO THE TOP OF THE HOME PAGE-->
<div id="wrapper">
<header>
<h1>Pretend Restaurant</h1>
<nav class="nav">
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
<div id="snow"></div>
</header>
<main>
<div id="page1">
<h2 class="category">Welcome to Snow Bar</h2>
<p><strong>Come relax and enjoy a unique and delicious treat.</strong></p><br>
</div>
<div id="page2">
<a id="menu" class="smooth"></a>
<h2>Menu</h2>
<h4>Recipes</h4>
<p>list of recipes</p>
</div>
<div id="page3">
<a id="aboutus" class="smooth"></a>
<h2>ABOUT US INFO GOES HERE</h2>
</div>
<div id="page4">
<a id="contact" class="smooth"></a>
<h2>Contact and Location</h2>
<p>Contact info goes here</p>
</div>
<div id="page5">
<a id="social" class="smooth"></a>
<h2>Social media information here</h2>
</div>
</div>
</body>
</main>
CSS
*{
box-sizing: border-box;
font-family: Georgia, Times, serif;
border-radius: 3.5px;
float: center;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
opacity: 0.86;
min-height: 900px;
}
h1 { font-family: Georgia, Times, serif;
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 4em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main { margin-left: 100px;
padding-bottom: 100px;
}
.header{ background-color: #000066;
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
box-sizing: border-box;
}
li {
display: inline-block;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
position: sticky;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
transition: 0.3s;
}
nav ul {
list-style: none;
width: 100%;
text-align: center;
display:inline-block;
}
nav a{text-decoration: none;
width: 100%}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
.category {
font-weight: bold;
background-color: #FFFFFF;
color: darkcyan;
text-align: center;
font-size: 50px;
padding-right: 50px;
padding-left:0;
}
#page1 { height:1000px;}
#page2 { height:1000px;}
#page3 { height:1000px;}
#page4 { height:1000px;}
#page5 { height:1000px;}
jQuery
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
That's exactly how HTML navigation works. You should use javascript to scroll to the right position. The formula will be like: parent.scrollTop = destination.offsetTop - nav.style.height)
$('.nav a').click(function(e) {
e.preventDefault();
var $scrooll_to_id = $(this.getAttribute('href'));
$('html').stop(true).animate({
scrollTop: ($scrooll_to_id.position().top - $('.nav').height())
});
});
Here a fiddle: https://jsfiddle.net/sjquno0r/1/
I'm making a single page style website and after scrolling 1 px has been scrolled (i.e. the homepage has been passed) I want the navigation bar to appear and stay fixed at the top.
I've tried the .scroll() jQuery and I'm having no luck.
HTML:
<div id="navbar">
<div id="nav-container">
<img id="logonavbar" src="#">
<a id="ABTUS" href="#">ABOUT US</a>
<a id="SRVCS" href="#">SERVICES</a>
<a id="PRTFLO" href="#">PORTFOLIO</a>
<a id="CNTCT" href="#">CONTACT</a>
</div>
</div>
CSS:
#navbar {
width: 100%;
background-color: white;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
overflow: hidden;
z-index: 10;
display: none;
}
#nav-container {
max-width: 1200px;
min-width: 700px;
margin: 0 auto;
}
#logonavbar {
float: left;
margin: 0 auto;
width: 125px;
padding: 10px 0 0 0;
}
#nav-container a {
float: right;
display: block;
padding: 25px 15px;
text-decoration: none;
color: black;
font-family: "calibri light", calibri,sans-serif;
font-size: 20px;
transition: background-color 0.5s ease;
}
#nav-container a:hover {
background-color: #f4f4f4;
transition: background-color 0.5s ease;
}
#nav-container a:active {
background-color: #bfbfbf;
}
#nav-container h1:hover {
color: #aaaaaa;
transition: color 0.3s ease;
}
jQuery:
$(document).scroll(function() {
if ($document.scrollTop() >= 50) {
$('#nav-container').css('display': 'inline', 'position': 'fixed');
}
});
Here I have made a simple example of a element that sticks to the top of the page after you scroll over it. Maybe it can help you as well!
http://corexsystems.net/2017/09/08/simple-sticky-menu-in-jquery-css3/
Here is the source of this example!
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
<script>
$(function(){
var pos = $("#topMenuX").offset().top,
win = $(window);
win.on("scroll", function() {
win.scrollTop() >= pos ? $("#topMenuX").addClass("fixed") : $("#topMenuX").removeClass("fixed");
});
});
</script>
<style>
body {
padding:0;
margin:0px;
}
#topMenuX {
background: #666;
padding: 20px;
height:45px;
color: #fff;
}
#topMenuX .insideMenu li {
float:left;
list-style:none;
}
</style>
</head>
<body>
<div id="topMenuX">
<ul class="insideMenu">
<li>CoreXDesigns</li>
<li>Simple Sticky Menu Example</li>
</ul>
</div>
</body>
</html>
I have put together a website - hosted here: http://curleylab.psych.columbia.edu/
I have used modernizr.js - http://curleylab.psych.columbia.edu/js/modernizr.js
css stylesheet is here - http://curleylab.psych.columbia.edu/css/css1.css
For the menu at the top (visible and working on desktops), I have actually used <footer> tags for each page. That bit of HTML looks like this:
<footer role="contentinfo">
<div>
<nav id="menu">
<ul role="navigation" class="nav">
<li><strong>Curley</strong>Lab </li>
<li>Research</li>
<li>Personnel</li>
<li>Publications</li>
<li>Teaching</li>
<li>R packages</li>
<li>R instruction</li>
<li>Contact</li>
</ul>
</nav>
</div>
</footer>
The relevant bits of css that apply to <footer> appear here:
/*Footer*/
footer[role=contentinfo] {
color: #fff;
background: #000;
margin: 0 -1em;
position: fixed;
z-index: 2;
}
footer[role=contentinfo] > div {
max-width: 70em;
padding: 0 1em;
margin: 0 auto;
overflow: hidden;
}
footer[role=contentinfo] p {
margin: 0;
}
footer[role=contentinfo] .nav li a {
display: block;
border-bottom: 1px solid #808080;
padding: 1em;
margin: 0 -1em;
}
footer[role=contentinfo] a {
display: inline-block;
padding: 0.5em 0;
}
footer[role=contentinfo] a.nav-home {
color: #fff;
}
footer[role=contentinfo] .f-rga {
padding: 0.6em 0;
}
footer[role=contentinfo] img {
max-width: 4.4em;
display: inline-block;
margin-bottom: -0.22em;
}
/*End Footer*/
/* Footer */
footer[role=contentinfo] {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
footer[role=contentinfo] .nav {
float: left;
}
footer[role=contentinfo] .nav li {
display: inline-block;
margin-right: 0.8em;
}
footer[role=contentinfo] .nav li a {
border: 0;
font-size: 110%;
}
footer[role=contentinfo] .f-rga {
float: right;
}
The issue is that it seems to be working well enough on desktops, but on mobile devices the menu (everything contained in the footer) just doesn't appear. Any help greatly appreciated.
Hi I was just wondering if there was a way of double clicking on a div and making the height reduce just by using CSS.
<div class="container"></div>
<ul class="accordion">
<li>
First
<div class="accordion-content" id="first">
<p>Bonjour</p></div>
</li>
<li>
Second
<div class="accordion-content" id="second">
<p>Hello</p></div>
</li>
<li>
Third
<div class="accordion-content" id="third">
<p>No</p></div>
</li>
You can find the code that I want to adjust in this Fiddle.
This is achievable in CSS only, if you can add the following HTML immediately after each <div class="accordion-content">:
<input>
Then add these styles:
.accordion-content {
position: relative;
}
.accordion-content a, .accordion-content input {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
}
.accordion-content input:focus {
z-index: -1;
}
.accordion-content a:focus {
z-index: 1;
}
Fiddle
Note: Please don't actually use this. It's an interesting way to go about what you want, and a fun challenge for me, but Javascript is by far a more appropriate and reliable tool for the job. Unless you are burdened with a client who is demanding this functionality while completely against the use of JS, just slap some jQuery on it and call it a day.
So, I couldn't figure out how to do this with only CSS using the ul in your current markup, but if you're open to changing it a little bit, you can do this with CSS only. I'm dumb and just needed to plug the code below into the ul element. Here is an example:
HTML
<ul class="accordion">
<li>
<span class="span" tabindex="0">
<input type="text" value=" " readonly="true" />
Show
</span>
<p id="showme" class="alert">Hidden Content</p>
</li>
</ul>
CSS
body {
font: 1em'Source Sans Pro', sans-serif;
}
.accordion {
width: 100%;
padding:0;
margin:0;
list-style-type: none;
}
span {
display: block;
padding: 15px 20px;
background: #bbb;
color:#fff;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
margin-bottom: 5px;
}
span a {
text-decoration: none;
}
span a:visited {
color:#fff;
}
.alert {
display: none;
margin: 20px;
}
span {
position: relative;
}
span a {
position: relative;
z-index: 2;
}
span a:hover, span a:active {
z-index: 4;
}
span input {
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 101%;
height: 301%;
z-index: 3;
}
span input:focus {
background: transparent;
border: 0;
z-index: 1;
}
#showme:target {
display: block;
}
Fiddle: https://jsfiddle.net/yn13syuj/
Essentially, what this does is cover the a tag using some z-index trickery until you click it once. Then, once it's uncovered, you can use :target to change the display property of the hidden content.
Using only css you can't handle double click events, Use JavaScript and .ondblclick function to do this, here's a DEMO of your code:
var divs = document.getElementsByClassName("accordion-content");
for (var i = 0; i < divs.length; i++) {
divs[i].ondblclick = function() {
if (this.offsetHeight > 50) {
this.style.height = this.offsetHeight - 20 + "px";
}
};
}
body {
font: 1em'Source Sans Pro', sans-serif;
}
.container {
width: 100%;
max-width: 400px;
}
.accordion {
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
.accordion-header {
display: block;
padding: 15px 20px;
background: #bbb;
color: #fff;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
margin-bottom: 5px;
}
.accordion-content {
height: 0;
overflow: hidden;
-webkit-transition: height 400ms ease;
transition: height 400ms ease;
}
.accordion-content p {
margin: 20px;
}
.accordion-content:target {
height: 150px;
overflow-y: scroll;
}
<div class="container"></div>
<ul class="accordion">
<li> First
<div class="accordion-content" id="first">
<p>Bonjour</p>
</div>
</li>
<li> Second
<div class="accordion-content" id="second">
<p>Hello</p>
</div>
</li>
<li> Third
<div class="accordion-content" id="third">
<p>No</p>
</div>
</li>
</ul>
It keeps decreasing the height until it reachs 50 px, you can change it to fit your needs.
And here's your updated Fiddle.