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.
Related
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>
I have a lot of trouble with my slider arrows as I am following along with a tutorial on youtube. Instead of going next to the picture and testimonial, it goes on the top. It didn't happen this way at first, but then I had a problem with glider.js, so I rewrote the code, and then the flaw appeared
HTML Code
<section class="testimonials-section">
<div class="wrapper">
<h2>Testimonials</h2>
<div class="testimonials container">
<div class="testimonials">
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Darlene Richards,</strong> Amazon
</div>
</div>
<img src="images/testimonial1.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Peter Williams,</strong> Louis Vuitton
</div>
</div>
<img src="images/testimonial3.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Tara Green,</strong> Ferrari
</div>
</div>
<img src="images/testimonial2.png" alt="">
</div>
</div>
</div>
<span class="slider-prev">
<img src="images/left-arrow.svg" alt="">
</span>
<span class="slider-next">
<img src="images/right-arrow.svg" alt="">
</span>
</div>
</div>
</section>
CSS Code
.slider-prev,
.slider-next {
position: absolute;
top: 68px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
border-radius: 50%;
cursor: pointer;
}
.slider-next {
right: 0;
}
This is because of how the css position property works more info
Try add this line and see if it helps:
edit use .testimonials.container selector not .testimonials
.testimonials.container {
position: relative;
}
I use bootstrap with grid,the goal is to show the same in the pic demo. In this pic demo, element photo ( green border ) seem like in a div ( col-6 ), but width of photos is reach to side of view . How can I build like that with html and css
<section class="intro-project">
<div class="row">
<div class="col-md-6">
<img src="./images/intro1.jpg" class="float-right" />
</div>
<div class="col-md-6">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
reprehenderit illum ab fugit vel enim voluptatem dicta quidem
ratione, corporis, non molestias ducimus quasi quos alias officiis
praesentium temporibus. Deserunt?
</p>
</div>
</div>
</section>
This is demo
I have 3 files for css, js, and php(which is more on html but i decided to put the php extension instead)
The project I'm trying to make is an interactive Menu that has a Page Flip action. I was able to find a reference in codepen. However, when I tried to apply it to my end, the animation and the text where not functioning the way I need it to be, although it works on codepen
The codes I used can also be find on the link i mentioned above. I just wanna ask how to properly call the external link https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js and https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js on the menu.php file?
This is how I did it on sublimetext. I am not sure if it is just the positioning of my files. the result on what I did is that all the text are all centered and no page flip occurring. Thanks for the help
Menu.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sakurajima Menu</title>
<link href="css/styles2.css" rel="stylesheet">
<script src="js/main2.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<link rel="shortcut icon" type="image/png" href="img/sakura-favicon.png"/>
</head>
<body>
<div class="container">
<div class="book-wrapper">
<div class="book-cover">
<img src="https://github.com/slyka85/assets/blob/master/bookcover2.png?raw=true" alt="">
</div>
<div class="pages-container">
<div class="pages">
<div class="page-num-1">
<div class="pages-content">
<div class="pages-background"></div>
<div class="content-inner">
<h1>Chapter 1</h1>
<div class="text"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.</p></div>
</div>
</div>
</div>
<div class="page-num-2">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 2</h1>
<div class="text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, cumque autem! Magni eligendi qui officiis? Fugit iste voluptatum atque voluptatibus totam! Nisi accusantium saepe hic. Aut nobis nesciunt mollitia error.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam odio modi, hic ratione fugit quod natus, excepturi quae minus voluptatum cupiditate quia magnam eveniet ex, reiciendis voluptates ipsam iste laudantium!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati deserunt magnam, at perspiciatis aut. Voluptatem consequuntur neque quisquam?</p>
</div>
</div>
</div>
</div>
<div class="page-num-3">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 3</h1>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptas molestiae tempore amet adipisci dicta incidunt nisi alias distinctio fugit blanditiis dignissimos nobis deserunt eum consequuntur ipsam, perspiciatis numquam repellendus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus in odio deserunt est hic minima inventore, mollitia, officia aspernatur eaque voluptatibus? Amet, molestias adipisci delectus ea eligendi sit numquam illo.</p>
</div>
</div>
</div>
</div>
<div class="page-num-4">
<div class="pages-content">
<div class="content-inner">
<h1>The End</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Put first the vendor libraries
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/main2.js" type="text/javascript"></script>
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>