We Keep Coding

what is interfering with my javascript scroll function?

I am making a div to scroll to the page top and to appear when scrolling, but it is not working. the div appears right at the beginning without scrolling. I figured out that for some reason it works on its own javascript code without the rest of the page's code but also it appears at the beginning until I scroll it hides and then shortly appears again. I can't figure out what exactly is causing that.
relevant code (if you comment the other javascript function concerning the header the scrolling function will work but as i said after you scroll a little):
let scrollupbutton = document.getElementsByClassName("back-to-top-wrapper");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollupbutton[0].style.display = "block";
} else {
scrollupbutton[0].style.display = "none";
}
}
let header = document.getElementsByClassName("title")
window.onscroll = function() {transformheader()};
function transformheader() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header[0].style.fontSize = "30px";
header[0].style.opacity = 0
header[0].style.transform = "translate3d(0px, 79.5556px, 0px)";
} else {
header[0].style.fontSize = "90px";
header[0].style.opacity = 1
}
}
function scrollrightfunction() {}
.back-to-top-wrapper {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
right: 0;
bottom: 0;
margin: 70px;
width: 50px;
height: 50px;
text-align: center;
background-color: rgb(122, 133, 183, 0.3);
z-index: 999;
}
.back-to-top-wrapper a {
color: rgba(110, 75, 206, 0.8);
font-size: 30px;
text-decoration: none;
width: inherit;
cursor: pointer;
}
.back-to-top-wrapper:hover {
background-color: rgba(166, 46, 88, .8);
}
.back-to-top-wrapper a:hover {
color: antiquewhite;
}
<header class="main-container header">
<h2 class="header-element main-header">blog name</h2>
<nav class="header-element nav-menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<form class="header-element search-bar" action="">
<input type="search" placeholder="search the blog">
<button type="submit">
<img src="/images/loupe.png" alt="search-image">
</button>
</form>
<h1 class="header-element title">Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
</header>
<main class="main-container main">
<h3 class="section-header">Recommended</h3>
<section class="blogs-container recommended">
<a class="prev" onclick="scrollLeftFunction()">❮</a>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam voluptas dolorum unde non ea consequatur ducimus quo ipsam quam saepe, inventore pariatur! Dolorum magnam consequatur iste expedita, optio reprehenderit iusto.</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic2.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis facilis dolorum odio ad inventore fuga similique blanditiis, nobis tempore cumque quis porro officiis deserunt, magnam veritatis provident harum quaerat aperiam. lo</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic3.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi veritatis delectus minus dolorum assumenda unde quas quidem tenetur, sapiente doloremque quam nobis, ducimus enim excepturi qui nulla. Dolorem, officia a?</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos perspiciatis placeat ratione officia dolore iusto, minus ipsum modi enim iste reiciendis sed doloribus sapiente voluptatem cum. Blanditiis, repudiandae. Sapiente, nulla.</p>
</a>
</article>
<a class="next" onclick="scrollRightFunction()">❯</a>
</section>
<div class="back-to-top-wrapper">
⇑
</div>

let scrollupbutton = document.getElementsByClassName("back-to-top-wrapper");
window.addEventListener("scroll",function(){
scrollFunction();
})
function scrollFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
scrollupbutton[0].style.display = "block";
} else {
scrollupbutton[0].style.display = "none";
}
}
let header = document.getElementsByClassName("title")
window.onscroll = function() {transformheader()};
function transformheader() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header[0].style.fontSize = "30px";
header[0].style.opacity = 0
header[0].style.transform = "translate3d(0px, 79.5556px, 0px)";
} else {
header[0].style.fontSize = "90px";
header[0].style.opacity = 1
}
}
function scrollrightfunction() {}
.back-to-top-wrapper {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
right: 0;
bottom: 0;
margin: 70px;
width: 50px;
height: 50px;
text-align: center;
background-color: rgb(122, 133, 183, 0.3);
z-index: 999;
}
.back-to-top-wrapper a {
color: rgba(110, 75, 206, 0.8);
font-size: 30px;
text-decoration: none;
width: inherit;
cursor: pointer;
}
.back-to-top-wrapper:hover {
background-color: rgba(166, 46, 88, .8);
}
.back-to-top-wrapper a:hover {
color: antiquewhite;
}
<header class="main-container header">
<h2 class="header-element main-header">blog name</h2>
<nav class="header-element nav-menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<form class="header-element search-bar" action="">
<input type="search" placeholder="search the blog">
<button type="submit">
<img src="/images/loupe.png" alt="search-image">
</button>
</form>
<h1 class="header-element title">Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
</header>
<main class="main-container main">
<h3 class="section-header">Recommended</h3>
<section class="blogs-container recommended">
<a class="prev" onclick="scrollLeftFunction()">❮</a>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam voluptas dolorum unde non ea consequatur ducimus quo ipsam quam saepe, inventore pariatur! Dolorum magnam consequatur iste expedita, optio reprehenderit iusto.</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic2.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis facilis dolorum odio ad inventore fuga similique blanditiis, nobis tempore cumque quis porro officiis deserunt, magnam veritatis provident harum quaerat aperiam. lo</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic3.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi veritatis delectus minus dolorum assumenda unde quas quidem tenetur, sapiente doloremque quam nobis, ducimus enim excepturi qui nulla. Dolorem, officia a?</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos perspiciatis placeat ratione officia dolore iusto, minus ipsum modi enim iste reiciendis sed doloribus sapiente voluptatem cum. Blanditiis, repudiandae. Sapiente, nulla.</p>
</a>
</article>
<a class="next" onclick="scrollRightFunction()">❯</a>
</section>
<div class="back-to-top-wrapper" style="display : none;">
⇑
</div>
This will work

Same class but only trigger function for the one selected

Hello everyone I'm having a hard time trying to understand how to make this work.
I have 8 different divs, each one with an img used as button and same class (tm-img) and hidden divs with additional info. What I want is to have displayed only the img at the beginnig and when the user clicks one of the 8 images depending on the one they clicked the hidden divs from that image show. (Whats happening now is tha if I click on one image all hidden divs from all images show not just the one I clicked)
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' onclick='run()' src="/team_1.png" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<script>
function run(){
$('.tm-info').toggle();
$('.tm-full-info').toggle();
$('.tm-title').toggle();
}</script>
All other 7 divs look the same with different image and name (Rick).
Thanks in advance.
Example

Consider the following.
$(function() {
function revealFullInfo(event) {
var self = $(event.target);
var parent = self.closest(".tm-full-container");
$('.tm-info, .tm-full-info, .tm-title', parent).toggle();
}
$(".tm-img").click(revealFullInfo);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://dummyimage.com/100x150/000/fff.png" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
It's all a matter of using the correct selector and scope.
$('.tm-info, .tm-full-info, .tm-title', parent).toggle();
This is the same as:
parent.find('.tm-info, .tm-full-info, .tm-title').toggle();

This could be done using the keyword this: https://www.yogihosting.com/jquery-this/
.tm-info, .tm-full-info, .tm-title {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://via.placeholder.com/150" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://via.placeholder.com/150" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<script>
$('.tm-img').click(function(){
$(this).parent().parent().find('.tm-info').toggle();
$(this).parent().parent().closest('.tm-full-info').toggle();
$(this).parent().parent().closest('.tm-title').toggle();
});
</script>

You can do something like in below snippet . Use the this keyword so that the clicked element is triggered not all .
You can also for loop to run through all tags and trigger(toggle) clicked event
function funcRun(show) {
var showInfo = show.querySelector(".tm-tag-Info");
showInfo.classList.toggle("tm-tag-Info-Show")
}
.tm-tag-Info {
display: none
}
.tm-tag-Info-Show {
display: block
}
.tm-tag {
border: 2px solid red;
margin: 10px;
padding: 10px;
}
.imageFun {
width: 100px;
height: 100px
}
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>

How to close element on second click? Using event click

What I'm trying to accomplish is to make a list with headings and on click at one it will show up a little description about the heading.
So far it only opens but it doesn't close. I tried to manipulate classes with if statements as well as I was searching for a solution but without success.
js:
export default function openTitle() {
const colTitle = document.querySelectorAll('.col-title');
const colContainer = document.querySelector('.col-container');
const colContent = document.querySelectorAll('.col-content');
colContainer.addEventListener('click', function (e) {
const clicked = e.target.closest('.col-title');
if (!clicked) return;
document.querySelector(
`.operations__content--${clicked.dataset.tab}`
).style.display = 'block';
});
}
html:
<div class="col-container">
<div class="col">
<div class="col-title" data-tab="1">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--1">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="2">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--2">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="3">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--3">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="4">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--4">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
</div>

Create a CSS class and use the classList API to toggle it:
element.classList.toggle('hidden')
function openTitle() {
const colContainer = document.querySelector('.col-container');
colContainer.addEventListener('click', function(e) {
const clicked = e.target.closest('.col-title');
if (!clicked) return;
document.querySelector(
`.operations__content--${clicked.dataset.tab}`
).classList.toggle('hidden');
});
}
openTitle();
.hidden {
display: none;
}
<div class="col-container">
<div class="col">
<div class="col-title" data-tab="1">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--1 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="2">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--2 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="3">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--3 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="4">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--4 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
</div>

Here's a minimal reproducable example using event delegation and [element].classList.toggle to toggle visibility.
document.addEventListener("click", handle);
function handle(evt) {
const origin = evt.target;
const item = origin.closest("[data-item]");
if (item) {
item.querySelector(".txt").classList.toggle("show");
}
}
body {
font: normal 12px/15px Lato, verdana, arial;
margin: 2rem;
}
[data-item] {
margin-bottom: 1rem;
}
.header {
font-size: 1.3em;
font-weight: bold;
cursor: pointer;
}
.txt {
display: none;
margin-top: 0.3rem;
}
.txt.show {
display: block;
}
<div data-item>
<div class="header">Header</div>
<div class="txt">Lorem ipsem etc</div>
</div>
<div data-item>
<div class="header"><i>Another</i> header </div>
<div class="txt">Ipsem Lorem etc</div>
</div>

text over image not responsive in bootstrap

I have an image, over which I am putting some heading on the right and left side of the image like below
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<div class="col-sm-3 text-center image-overlapping">
<h1>Hello Suarj</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet.
</div>
<img src="http://oi65.tinypic.com/15oi0w9.jpg" class="ls-bg" alt="Slide background" style="width:100%; height:auto;">
<div class="col-sm-3 text-center image-overlapping right">
<h1>Hello Suarj</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet.
</div>
</div>
</div>
This works well for me, but it is not responsive for the mobile. How do I go about it.
Here's the fiddle for the same.

So I added this media-query
#media (max-width: 480px){
.image-overlapping {position: relative; top : 0 !important;}
}
And added col-xs-12 to the div which has my heading.
It works for me. Thanks for help.

Here you go with the solution https://jsfiddle.net/65upzvk6/18/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 text-center image-overlapping">
<h1>Hello Suarj</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. Provident, qui nisi voluptatum laboriosam ut vitae eaque nesciunt cumque omnis! Porro esse culpa fugiat molestias ab! Odit, quibusdam sunt consectetur optio ea velit accusamus voluptatem.
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-8">
<img src="http://oi65.tinypic.com/15oi0w9.jpg" class="ls-bg" alt="Slide background" style="width:100%; height:auto;" />
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 text-center image-overlapping">
<h1>Hello Suarj</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. Provident, qui nisi voluptatum laboriosam ut vitae eaque nesciunt cumque omnis! Porro esse culpa fugiat molestias ab! Odit, quibusdam sunt consectetur optio ea velit accusamus voluptatem.
</div>
</div>
</div>
</div>
</div>
This is one more way to skip position absolute.

issue with hide and show content plus changing image on click

I am trying to hide and show some content and it is working but i can not make the button image to change from Minus to Plus when I have to hide the content back to it's normal state.
Anu suggestions ?
Here is my code until this moment.
$(document).ready(function() {
$('#show-content img').click(function() {
$('.hidden-content').slideToggle("fast");
$('.default-plus').attr('src','https://s11.postimg.org/7w0jbixvz/hide_content.jpg');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-content">
<img src="https://s11.postimg.org/40x58yeq7/show_content.jpg" width="66" height="66" title="someText" alt="someText" class="default-plus">
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>
thank you guys but what if I have several same divs and i want to press this button to show and hide content then all others divs which are the same are opening and closing their content. How can I isolate them ?

Use 2 classes with background images:
$('.default').toggleClass('plus minus')
UPDATE
OP requested multiple buttons independently functioning. Used the keyword this and .parent() and .next() to target .hidden-content
$(document).ready(function() {
$('.show-content button').click(function() {
$(this).parent().next('.hidden-content').slideToggle("fast");
$(this).toggleClass('plus minus')
});
});
.default {
width: 66px;
height: 66px;
display: inline-block;
cursor: pointer;
border-radius: 50%;
border: 0 none transparent;
}
button:focus {
outline: 0;
}
.plus {
background: url(https://s11.postimg.org/40x58yeq7/show_content.jpg)no-repeat;
background-size: contain;
background-color: transparent;
}
.minus {
background: url(https://s11.postimg.org/7w0jbixvz/hide_content.jpg)no-repeat;
background-size: contain;
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-content">
<button title="someText" class="default plus"></button>
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>
<div class="show-content">
<button title="someText" class="default plus"></button>
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>
<div class="show-content">
<button title="someText" class="default plus"></button>
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>
<div class="show-content">
<button title="someText" class="default plus"></button>
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>

$(document).ready(function() {
$('#show-content img').click(function() {
$('.hidden-content').slideToggle("fast");
if ($('.default-plus').attr('src') == "https://s11.postimg.org/40x58yeq7/show_content.jpg") {
$('.default-plus').attr('src','https://s11.postimg.org/7w0jbixvz/hide_content.jpg');
}else {
$('.default-plus').attr('src','https://s11.postimg.org/40x58yeq7/show_content.jpg');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-content">
<img src="https://s11.postimg.org/40x58yeq7/show_content.jpg" width="66" height="66" title="someText" alt="someText" class="default-plus">
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>

$(document).ready(function() {
// get the default Image source before clicking
// also it will not change it will remain the default image source
var toggleImageDefaultSrc = $('.default-plus').attr('src');
$('#show-content img').click(function() {
var iconSrc = toggleImageDefaultSrc;
// if element is toggled change image source
if($( ".hidden-content" ).is( ":hidden" )) {
iconSrc = 'https://s11.postimg.org/7w0jbixvz/hide_content.jpg';
}
$('.hidden-content').slideToggle("fast");
$('.default-plus').attr('src', iconSrc);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-content">
<img src="https://s11.postimg.org/40x58yeq7/show_content.jpg" width="66" height="66" title="someText" alt="someText" class="default-plus">
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>

$(document).ready(function() {
$('#show-content img').click(function() {
var $plus = $('.default-plus');
var $content = $('.hidden-content');
if ($plus.hasClass('minus')) {
$content.slideUp("fast");
$plus
.removeClass('minus')
.attr('src','https://s11.postimg.org/40x58yeq7/show_content.jpg');
} else {
$content.slideDown("fast");
$plus
.addClass('minus')
.attr('src','https://s11.postimg.org/7w0jbixvz/hide_content.jpg');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-content">
<img src="https://s11.postimg.org/40x58yeq7/show_content.jpg" width="66" height="66" title="someText" alt="someText" class="default-plus">
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>

Use if condition inside the click event, and change the src of image like this
$(document).ready(function() {
$('#show-content img').click(function() {
$('.hidden-content').slideToggle("fast");
if(!$('.hidden-content').is(':visible'))
{
$('.default-plus').attr('src','https://s11.postimg.org/7w0jbixvz/hide_content.jpg});
}
else
{
$('.default-plus').attr('src','https://s11.postimg.org/40x58yeq7/show_content.jpg});
}
});
Hope it should works, if not please change the if condition little bit, it should work.

In this cases, I recommend to use CSS instead of editing the image source.
At least I would have did it this way instead.
You should keep your JS as simple as possible to achieve something you want and this can arguably improve the overall performance.
$(document).ready(function() {
$('.default-plus').on('click', function() {
$('.hidden-content').slideToggle("fast");
$(this).toggleClass("clicked");
});
});
.default-plus {
display: block;
width: 66px;
height: 66px;
background: url('https://s11.postimg.org/40x58yeq7/show_content.jpg') no-repeat;
background-size: 66px;
cursor: pointer;
}
.default-plus.clicked {
background-image: url('https://s11.postimg.org/7w0jbixvz/hide_content.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-content">
<div class="default-plus"></div>
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>

Try running this code.Hope it works for you.
$(document).ready(function() {
$('#show-content img').click(function() {
$('.hidden-content').slideToggle("fast");
if($('.default-plus').attr('src') == 'https://s11.postimg.org/7w0jbixvz/hide_content.jpg')
{
$('.default-plus').attr('src','https://s11.postimg.org/40x58yeq7/show_content.jpg');
}
else
{
$('.default-plus').attr('src','https://s11.postimg.org/7w0jbixvz/hide_content.jpg');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-content">
<img src="https://s11.postimg.org/40x58yeq7/show_content.jpg" width="66" height="66" title="someText" alt="someText" class="default-plus">
<h3>How to Sign-In on the Device</h3>
<p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>