Develop Reference

Creating a Team Page with on-click bio

I need to create a pretty simple table that has pictures of our team members (4 total). When one of these images is clicked, I want a 'modal(correct term?)' to open beneath the images and include their biographies, titles, etc. I have included my code below to something that is close to functional, but I cannot figure out how to make one close when the other opens properly.
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
<h1>John Doe</h1>
<p>President</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
JSFIDDLE: https://jsfiddle.net/hLkgcqxr/1/
My ideas is that when the user clicks '1' it opens below, and when they click '2' it changes to the biography of user 2.
Please let me know if there's any additional info needed in order to push me in the right direction - I know it can be a bit confusing :)

This logic relies on a css rule that makes the inner elements hidden, so long as the parent spoiler does not have a class of active.
All our logic does is, when an outer is clicked, it removes the active class from any spoiler that already has it, and then adds the active class to the spoiler the outer belongs to.
var $spoilers = $('.spoiler').on('click', '.outer', function(e){
$spoilers.removeClass('active');
$spoilers.has(e.target).addClass('active');
});
.spoiler:not(.active) .inner { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
<h1>John Doe</h1>
<p>President</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>

CSS Remove white gaps above floated elements

I am trying to build this layout:
I used float: left for the boxes in the left side and float: right for the ones in the right.
The problem is that every right-floated box is aligning it's top with the the previous left-floated element.
Thus all I get is this:
HTML:
I need to keep the elements in this order (box1, box2, ... box7)
<div class="container">
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum (...)
</div>
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum (...)
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum (...)
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
</div>
DEMO: https://codepen.io/constagorgan/pen/vjLJzG
Other considerations:
On smaller devices the boxes should be merged in a single column, same as using col-*-12 in Bootstrap, but keeping same ordering (box1, box2, ... box7)
I can use Bootstrap, Masonry, Bulma or other library that helps building grids / layouts as long as it's supported by IE11, Chrome and Firefox
A CSS-only solution would be absolutely fantastic.
I don't want to use display: table. Reasons for this are given here.
What I've tried so far:
Using Bootstrap → I cannot make it responsive for small screens without moving things around inside the DOM.
Using Masonry → I couldn't find a way to order the boxes. They are just positioning themselves in the closest available place.
Using flex → I got stuck in a similar situation.
Using CSS grid layout → It's not fully supported on IE11.
Using CSS columns → I need a 70%|30% ratio. This is designed for 50%|50%.
How can I remove those white gaps from the layout? Can I achieve this with floated elements? If not, what's the proper way to do it?
EDIT:
I need to make it responsive. On smaller screen I need to stick with this one-column layout (as I mentioned in the "Other considerations" section.

If you combine Flexbox and float, you can do like this, where on narrower screens make use of the Flexbox property order.
By initially add the smaller elements first, you can simply float and clear them and they will align right, in a column of their own.
When the media query kicks in, remove float, add display: flex and order them 1-7.
Updated codepen
Stack snippet
.left {
width: 75%;
}
.right {
float: right;
width: 25%;
clear: right
}
.green { background-color: #90EE90; }
.blue { background-color: #20B2AA; }
.orange { background-color: #FFA07A; }
.pink { background-color: #FFB6C1; }
.yellow { background-color: #FFD700; }
.teal { background-color: #00CED1; }
.purple { background-color: #9370DB; }
#media (max-width: 500px) {
.left, .right {
float: none;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
}
.container .box1 { order: 1 }
.container .box2 { order: 2 }
.container .box3 { order: 3 }
.container .box4 { order: 4 }
.container .box5 { order: 5 }
.container .box6 { order: 6 }
.container .box7 { order: 7 }
}
<div class="container">
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum.
</div>
</div>
If you can't change markup, you need script, where you either hook up on the resize event, or as here, the window.matchMedia event.
Stack snippet
document.addEventListener("DOMContentLoaded", function(event) {
var container = document.querySelector('.container');
var items = document.querySelectorAll('.container .box');
var reorderitems = function(matched) {
if (matched) {
container.appendChild(items[0]);
container.appendChild(items[3]);
container.appendChild(items[5]);
} else {
container.insertBefore(items[2], items[3]);
container.insertBefore(items[1], items[2]);
container.insertBefore(items[4], items[5]);
container.appendChild(items[6]);
}
}
reorderitems(window.outerWidth > 500);
window.matchMedia("(min-width: 501px)").addListener(function(e) {
if (e.matches) {
reorderitems(true);
} else {
reorderitems(false);
}
});
});
.left {
width: 75%;
}
.right {
float: right;
width: 25%;
clear: right
}
.green {
background-color: #90EE90;
}
.blue {
background-color: #20B2AA;
}
.orange {
background-color: #FFA07A;
}
.pink {
background-color: #FFB6C1;
}
.yellow {
background-color: #FFD700;
}
.teal {
background-color: #00CED1;
}
.purple {
background-color: #9370DB;
}
#media (max-width: 500px) {
.left,
.right {
float: none;
width: 100%;
}
}
<div class="container">
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum.
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
</div>

You need to create two new Divs to group the boxes at each side:
<div class="container">
<div class="group box left">
<div class="box box1 green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box4 pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box6 teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum.
</div>
</div>
<div class="group box right">
<div class="box box2 orange">
BOX 2 (small)
</div>
<div class="box box3 blue">
BOX 3 (small)
</div>
<div class="box box5 yellow">
BOX 5 (small)
</div>
<div class="box box7 purple">
BOX 7 (small)
</div>
</div>
</div>

Hiding/showing a sticky menu div on resize using javascript and media queries

What I want to achieve is to have a menu bar stuck to the top only when browser window is at least 980px wide. When the window is resized to less than 980px of width there should be no sticky menu showing. Then, resizing it to more that 980px of width, the menu should appear again.
Here's my code:
var backup = $("#moving_topbar");
var buffer;
var mql = window.matchMedia("(min-width: 980px)");
mql.addListener(showhidemenu);
showhidemenu(mql);
function showhidemenu(mql) {
if (mql.matches) {
$(window).scroll(function() {
backup.append(buffer);
if ($(window).scrollTop() > 96) {
$("#moving_topbar").show();
} else {
$("#moving_topbar").hide();
}
});
} else {
backup = $("#moving_topbar");
buffer = $("#moving_topbar").detach();
}
}
/*those are inside separate css files*/
#moving_topbar {
/*wide.css*/
position: fixed;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #ffffff;
display: none;
}
#moving_topbar {
/*narrow.css*/
display: none;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" media='screen and (min-width: 980px)' href="wide.css" type="text/css" />
<link rel="stylesheet" media='screen and (max-width: 979px)' href="narrow.css" type="text/css" />
</head>
<body>
<div id="moving_topbar">
<div id="logodiv"> <img src="img/logo100.png" alt="Logo" class="rounded_corners_moving"> </div>
<div id="socialtop_moving">
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div style="clear:both;"> </div>
</div>
<div id="menu_moving">
<div class="option_moving"> <b> ZAGRAJ </b> </div>
<div class="option_moving"> <b> PROJEKTY </b> </div>
<div class="option_moving"> <b> ARTYKUŁY </b> </div>
<div class="option_moving"> <b> ENG </b> </div>
<div style="clear:both;"> </div>
</div>
<div style="clear:both;"> </div>
</div>
</body>
The problem is that when I f5 the window on fullscreen it works ok, then I reduce its width and no bar shows (ok) but after this, when I increase the width (fullscreen) again, no sticky topbar menu appears.
When I f5 with window width smaller than 980px (no topbar here - ok) and then fullscreen, the menu shows and follows on scrolling. Then I perform the steps described above and the same problem occurs.
Maybe this is just a stupid mistake I somehow missed but I believe this occurs due to my poor experience with javascript/jQuery.
Working code recreation:
<!DOCTYPE HTML>
<head>
<style>
#media screen and (min-width: 980px)
{
#topbar
{
margin-left: auto;
margin-right: auto;
width: 100%;
height: 120px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #000000;
}
#moving_topbar
{
position: fixed;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #000000;
display: none;
}
}
#media screen and (max-width: 979px)
{
#topbar
{
margin-left: auto;
margin-right: auto;
width: 100%;
padding-top: 14px;
padding-bottom: 1px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #000000;
}
#moving_topbar
{
display: none;
}
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
var backup = $("#moving_topbar");
var buffer;
var mql = window.matchMedia("(min-width: 980px)");
mql.addListener(showhidemenu);
showhidemenu(mql);
function showhidemenu(mql)
{
if (mql.matches)
{
$(window).scroll(function()
{
backup.append(buffer);
if($(window).scrollTop() > 96) { $("#moving_topbar").show(); }
else { $("#moving_topbar").hide(); }
});
}
else
{
backup = $("#moving_topbar");
buffer = $("#moving_topbar").detach();
}
}
</script>
</head>
<body>
<div id="moving_topbar">
<div id="logodiv"> img logo </div>
<div id="socialtop_moving">
<div class="soc_icon_moving"> moving img 1 </div>
<div class="soc_icon_moving"> moving img 2 </div>
<div class="soc_icon_moving"> moving img 3 </div>
<div class="soc_icon_moving"> moving img 4 </div>
<div style="clear:both;"> </div>
</div>
<div id="menu_moving">
<div class="option_moving"> <b> moving menu 1 </b> </div>
<div class="option_moving"> <b> moving menu 2 </b> </div>
<div class="option_moving"> <b> moving menu 3 </b> </div>
<div class="option_moving"> <b> moving menu 4</b> </div>
<div style="clear:both;"> </div>
</div>
<div style="clear:both;"> </div>
</div>
<div id="topbar">
<div id="logodiv"> some img </div>
<div id="socialtop">
<div class="soc_icon"> a, img </div>
<div class="soc_icon"> a, img </div>
<div class="soc_icon"> a, img </div>
<div class="soc_icon"> a, img </div>
<div style="clear:both;"> </div>
</div>
<div id="menu">
<div class="option"> <b> menu1 </b> </div>
<div class="option"> <b> menu2 </b> </div>
<div class="option"> <b> menu3 </b> </div>
<div class="option"> <b> menu4 </b> </div>
<div style="clear:both;"> </div>
</div>
<div style="clear:both;"> </div>
</div>
<div style="width:500px;color:grey;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla
</div>
</body>
Sorry for this long lorem ipsum but it's necessary to make the page scrollable. Also forgive me but I have no idea how to format the code properly.

You can achieve it by using media queries, try this.
#media screen and (max-width: 980px)
{
#moving_topbar
{
display: none;
}
}

CSS Accordion in AngularJS with no directive - fixed height issue

I was hoping to prove how cool and easy AngularJS is with a small Accordion example, the whole thing is pretty simple, in my Controller I have an array and I have a ng-repeat where I bind some data and apply a css rule when the $index of the ng-repeat matches a scope variable. It's all simple stuff like so, here is my controller (I've reduced some of the text for this example).
$scope.paymentTypes = [
{name: 'Visa', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie. Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at!'},
{name: 'Master Card', text: 'Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at, scelerisque ac nisi. Nunc tristique, ipsum eu gravida dignissim, lacus turpis dapibus enim, ut viverra neque sem ac lectus. Sed sit amet auctor est. Nulla sit amet felis magna.'},
{name: 'Paypal', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie. Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at, scelerisque ac nisi. Nunc tristique, ipsum eu gravida dignissim, lacus turpis dapibus enim, ut viverra neque sem ac lectus. Sed sit amet auctor est. Nulla sit amet felis magna.'},
{name: 'Bitcoin', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie.'}];
$scope.selectedType = null;
$scope.togglePayments = function (index) {
if ($scope.selectedType === index) {
$scope.selectedType = null;
} else {
$scope.selectedType = index;
}
}
and here is my ng-repeat in my view...
<div data-ng-repeat="ptype in paymentTypes track by $index" data-ng-click="togglePayments($index)">
<div class="row u-padding-vert-s">
<div class="col-xs-6 payment-type" data-ng-bind="ptype.name"></div>
<div class="col-xs-6 text-right"><!-- put a logo here later --></div>
</div>
<div class="row u-slide-down" data-ng-hide="selectedType !== $index">
<div class="col-xs-12" data-ng-bind="ptype.text">
</div>
</div>
<div class="row">
<div class="col-xs-5 u-border-top-1"></div>
<div class="col-xs-2 toggle-tab text-center">
<span class="icon-ic_list_arrow_down"></span>
</div>
<div class="col-xs-5 u-border-top-1"></div>
</div>
</div>
and here is the css I have created to prove the sliding open and close animation:
.u-slide-down {
transition: .3s linear all;
overflow: hidden;
background: yellowgreen;
height: 200px;
}
.u-slide-down.ng-hide {
height: 0px;
}
Pretty cool, however this example relies on all hidden divs being the same height. In the real world I would prefer the hidden div to be flexible with its height and be more dynamic! As the content is different and may even contain HTML at some point. Now when I set my css to height: auto; in the .u-slide-down class the animation is lost. I don't want to have to write a directive for this as I want my example to be as simple as possible, so can anyone suggest what I can do to my CSS to allow dynamic heights and retain the animation? In the meantime, I'll try to put something together in https://jsbin.com... give me a sec!

jQuery Toggle open all divs

I'm needing to run a script that I made, it's pretty basic but it is working, but not the way I want, I made this code because I could not find any that could modify
HTML:
<div class="corpo">
<div class="menu-segmento">
<div class="item total">
<div class="item-topo">
<div class="tooltips" >
<img class="ocultar" src="img/ocultar.png" />
<span>Veja menos</span>
</div>
<div class="tooltips" >
<img class="mostrar" src="img/mostrar.png" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item total">
<div class="item-topo">
<div class="tooltips" >
<img class="ocultar" src="img/ocultar.png" />
<span>Veja menos</span>
</div>
<div class="tooltips" >
<img class="mostrar" src="img/mostrar.png" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
and here is the JS for jQuery
$(function () { // DOM ready shorthand
var flip = 0;
$('.mostrar').click( function(){
$('.segmento').slideToggle();
$('.mostrar').fadeOut();
$('.ocultar').fadeIn();
});
$('.ocultar').click( function(){
$('.segmento').slideToggle();
$('.ocultar').fadeOut();
$('.mostrar').fadeIn();
});
});
 
He is opening the 2 and know it is missing a line of code but I have no idea how to fix.
Any suggestions?

LIVE DEMO
If you have i.e this CSS:
.segmento, .ocultar{
display:none;
}
Remove the classes from the images and add to .tooltips:
<div class="corpo">
<div class="menu-segmento">
<div class="item total">
<div class="item-topo">
<div class="tooltips ocultar">
<img src="http://placehold.it/50x50/f00&text=ocultar" />
<span>Veja menos</span>
</div>
<div class="tooltips mostrar" >
<img src="http://placehold.it/50x50/cf5&text=mostrar" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item total">
<div class="item-topo">
<div class="tooltips ocultar" >
<img src="http://placehold.it/50x50/f00&text=ocultar" />
<span>Veja menos</span>
</div>
<div class="tooltips mostrar" >
<img src="http://placehold.it/50x50/cf5&text=mostrar" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
And this is all you need:
$(function () { // DOM ready shorthand
$('.mostrar, .ocultar').click( function(){
var $parent = $(this).closest('.item');
$(this).toggle().siblings().toggle();
$parent.find('.segmento').slideToggle();
});
});