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>

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;
}
}

How to create a random changing paragraph with fade effects?

For a horror themed website I'm supposed to create a div that houses reviews.
I want the reviews to stay on screen for a couple of seconds before fading out and being replaced with another review. I kind of have an idea about how to get the desired effect using Jquery and absolute css placement, but I'm having trouble getting the code to do exactly what I want.
Some examples on google and this website have pushed me to the right direction I think, but none work very well for multiple paragraphs + random placement. (In case a visitor returns to the site, he's faced with different reviews the the last time)
I'm guessing I'll need an array..
$('#leftReview').fadeIn('fast').delay(1000).fadeOut('fast');
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
}
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>

To randomize the divs you need to use Math.random function to get a random number.
$(document).ready(function() {
setInterval(rotate,1200);
})
var panels = $('.leftReview');
var arr = [];
var rand = getRandom(panels.length);
panels.eq(rand).fadeIn();
function rotate() {
var visible = panels.filter(':visible').fadeOut(function() {
panels.eq(getRandom(panels.length)).fadeIn();
});
}
function getRandom(length) {
if (arr.length == length) {
arr = [];
}
var rand = Math.floor(Math.random() * length);
if (arr.indexOf(rand) > -1) {
return getRandom(length)
}
arr.push(rand)
return rand;
}
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview {
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
http://jsbin.com/pojoke/edit?html,css,js

For make this, use setInterval event and make your div on display:none first
Please try
$(document).ready(function() {
var id = 0;
var carrousel = setInterval(rotate,1200);
function rotate(){
if(id != $('.leftReview').length){
$('.leftReview').eq(id).fadeIn(100).delay(1000).fadeOut(100)
id++;
}
}
})
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
Update with random view
$(document).ready(function() {
var carrousel = setInterval(rotate,1200);
function rotate(){
id = Math.floor((Math.random() * $(".leftReview").length));
$('.leftReview').eq(id).fadeIn(100).delay(1000).fadeOut(100)
}
})
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>

Using ng-click and ng-hide/show inside ng-repeat, Angular

I have a basic Single Page Website using Angular. I have used an ng-repeat to generate some of the content on the main page. Each item in the repeat is an image, and I want to have an alternate view for each one, showing more detail.
I have a basic implementation for this and the views are toggling using ng-hide/show.
However there seems to be a slight flicker, and I suspect all of each photos view is toggling; as opposed to the one clicked.
Here is the HTML:
<div class="row">
<div class="col-sm-6 col-md-4" ng-repeat='service in services'>
<div class="thumbnail">
<div class='image-container' ng-show="show" ng-style="{'background-image': 'url(' + service.photo + ')'}">
</div>
<div class='image-container alt' ng-hide='show' ng-style="{'background-image': 'url(' + service.photo + ')'}">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla est justo, nec pellentesque ex dictum et. Etiam laoreet, justo in condimentum sodales, nisi sapien euismod dolor, vitae feugiat nulla dui eu eros. Ut efficitur vel ipsum et pellentesque. Sed placerat risus eget euismod mattis.</p>
</div>
<div class="caption">
<h4>{{ service.name }}</h4>
<button ng-click="show=!show" class='service-button'>More Info</button>
</div>
</div>
</div>
</div>
CSS:
.service-button
{
position: absolute;
bottom: 40px;
right: 30px;
}
.image-container
{
width:100%;
height:300px;
}
.alt
{
opacity: 0.4;
font-size: 1.4em;
padding: 10px;
color: black;
}
Controller:
$scope.show = true;
Is there a more efficient way of doing this?

I think the flicker may be happening because you're hiding one div and then showing the other. Right now you have:
<div class='image-container' ng-show="show" ng-style="{'background-image': 'url(' + service.photo + ')'}">
</div>
<div class='image-container alt' ng-hide='show' ng-style="{'background-image': 'url(' + service.photo + ')'}">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla est justo, nec pellentesque ex dictum et. Etiam laoreet, justo in condimentum sodales, nisi sapien euismod dolor, vitae feugiat nulla dui eu eros. Ut efficitur vel ipsum et pellentesque. Sed placerat risus eget euismod mattis.</p>
</div>
Maybe try:
<div class='image-container' ng-class="{'alt': show == true}" ng-style="{'background-image': 'url(' + service.photo + ')'}">
<p ng-show="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla est justo, nec pellentesque ex dictum et. Etiam laoreet, justo in condimentum sodales, nisi sapien euismod dolor, vitae feugiat nulla dui eu eros. Ut efficitur vel ipsum et pellentesque. Sed placerat risus eget euismod mattis.</p>
</div>
So that you're just adding that alt class and showing the info if show == true.

Have you tried adding a boolean show field on each service object. So ng-show="service.show" and ng-click="service.show=!service.show"? That would be my suggested way of handling it

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();
});
});