Develop Reference

How to animate height of fadeIn & toggle & fadeOut

I would like to know how I could improve the code and how to animate the height of the fadeIn/toggle. There is a jerky movement to the height when you click a checkbox. I would like it to be a smooth slide up or down. I read that the jerky movement is because jquery doesn't know the height of the element being faded in or out. Am I on the right track?
MyCode:
jQuery('.checkbox').on('change', function() {
window.globalCheckboxValue = CheckBoxSwitch(jQuery(this).val());
jQuery('.checkbox').not(this).prop('checked', false);
});
function CheckBoxSwitch(choice) {
var text = "";
var $selectList = jQuery('.selecrWrapper');
var $datepicker = jQuery('.datepicker');
switch (parseInt(choice)) {
case 1:
text = "Pedagog";
if (!$datepicker.is(':visible') && !$selectList.is(':visible')) {
jQuery(".selecrWrapper").animate({ marginTop: "100px" }, 1000, function () {
$datepicker.fadeIn(1000);
});
}
if (!$datepicker.is(':visible') && $selectList.is(':visible')) {
$selectList.fadeToggle(600, function() {
$datepicker.fadeIn(1000);
});
}
break;
case 2:
text = "Arrendator";
if (!$datepicker.is(':visible') && !$selectList.is(':visible')) {
$datepicker.fadeIn(1000);
}
if (!$datepicker.is(':visible') && $selectList.is(':visible')) {
$selectList.fadeToggle(600, function() {
$datepicker.fadeIn(1000);
});
}
break;
case 3:
text = "Program";
if (!$selectList.is(':visible') && !$datepicker.is(':visible')) {
$selectList.fadeIn(1000);
}
if ($datepicker.is(':visible') && !$selectList.is(':visible')) {
$datepicker.fadeToggle(600, function() {
$selectList.fadeIn(1000);
});
}
break;
}
return text;
}
.calenderStyle {
margin-top: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="displayPedagog">
<span>
Pedagog:
</span>
<input type="checkbox" class="checkbox" value="1" />
</div>
<div class="marginArr">
<span>
Arrendator
</span>
<input type="checkbox" class="checkbox" value="2" />
</div>
<div class="marginProg">
<span>
Program
</span>
<input type="checkbox" class="checkbox" value="3" />
</div>
</div>
<div class="slectanddateWrapper">
<!-- DatePicker -->
<div class="datepicker" style="display:none;">PlaceHolderDatePicker</div>
<!-- DatePicker -->
<!-- SelectList -->
<div class="selecrWrapper" style="display:none;">
<label class="selectLabelProgram">Välj det program du tillhör: </label>
<select class="form-control selectProgram" id="selectList"></select>
</div>
<!-- SelectList -->
</div>
<div class="calenderStyle">
<!-- calender -->
<div id='calendar'>CalenderPlaceHolder</div>
<!-- calender -->
</div>

The height difference is happening because the <select/> has more height than the <span/>.
You can try using slideUp() or slideDown() to achieve a smoother transition.
If you prefer using toggle, you can use slideToggle().

Show a division on button click and hide other divisions

i've got 20/30 divs.
If i click on a button the onClick will tell the function to show welcomeDiv1
but it should also hide welcomeDiv2/3/4/5/6 etc..
Same with showing welcomeDiv7, then it needs to hide welcomeDiv1/2/3/4/5/6/8/9 etc..
Script:
function showDiv1() {
document.getElementById('welcomeDiv').style.display = "none";
document.getElementById('welcomeDiv1').style.display = "block";
}
^^ Now it actually should hide all divs named welcomeDiv.. expect welcomeDiv1
First code
<div class="websites">
<div id="welcomeDiv" style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="welcomeDiv1" style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
</div>
And second code
<a title='Project 1'class="text1" onclick="showDiv()">Project 1</a>
<script>
function showDiv() {
document.getElementById('welcomeDiv1').style.display = "none";
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<a title='Project 2' class="text1" onclick="showDiv1()">Project 2</a>
<script>
function showDiv1() {
document.getElementById('welcomeDiv').style.display = "none";
document.getElementById('welcomeDiv1').style.display = "block";
}
</script>

You must use for loops, for example
function showDiv(div){
for (i = 0; i => 100; i++){
var x = document.getElementById('exampleDiv-' + i);
x.style.display = 'none';
//You can also use visibility to get animations work.
}
var y = document.getElementById('exampleDiv-' + i);
y.style.display = 'block';
}

You can refactor your HTML/Script. Persist target with the element, which can be later retrieved using Element.dataset property.
Learn to use addEventListener() to attach event handler.
Here is a sample snippet:
document.querySelectorAll('.button').forEach(function(element) {
element.addEventListener('click', function() {
var _this = this;
document.querySelectorAll('.welcome').forEach(function(welcome) {
if (_this.dataset.target == welcome.id) {
welcome.style.display = "block";
} else {
welcome.style.display = "none";
}
})
});
});
.welcome {
display: none
}
<button type="button" class="button" data-target="welcome1">1</button>
<button type="button" class="button" data-target="welcome2">2</button>
<button type="button" class="button" data-target="welcome3">3</button>
<br/>
<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>

Also give each div a class WelcomeDiv. Then, you just hide the entire WelcomeDiv class and show the one you want. For example:
divs = document.getElementsByClassName("WelcomeDiv");
for (i = 1; i < divs.length; i++) {
divs[i].style.display = "none";
}
document.getElementById("WelcomeDiv1").style.display = "block";

A simple and easy solution for you:
<a title='Project 1'class="text1" onclick="showDiv('welcomeDiv1')">Project 1</a>
<a title='Project 2' class="text1" onclick="showDiv('welcomeDiv2')">Project 2</a>
<div class="websites">
<div id="welcomeDiv1" style="display:none;" class="answer_list" >1</div>
<div id="welcomeDiv2" style="display:none;" class="answer_list" >2</div>
</div>
<script>
function showDiv(div_id) {
var divsToHide = document.getElementsByClassName("answer_list"); //divsToHide is an array
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = "none"; // hide your divisions
}
document.getElementById(div_id).style.display = "block"; //show your division
}
</script>

Alright i fixed it my self, with some help of the lovely internet
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
And HTML 1:
<input id="tempDivName" type="hidden" />
<a title='Project 1'class="text1" OnClick="MyFunction('myDiv1');">Project 1</a>
<a title='Project 2' class="text1" OnClick="MyFunction('myDiv2');">Project 2</a>
<a title='Project 3' class="text1" OnClick="MyFunction('myDiv3');">Project 3</a>
And html 2:
<div id="myDiv1" style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="myDiv2" style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="myDiv3" style="display:none;" class="answer_list" ><object data="cv/Practiced.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>

If you are trying without a loop as you have n set of a and div(loop through more elements affects performance), then I would suggest to go with adding show class to the showing div
function showDiv(t) {
if (document.querySelector('.show'))
document.querySelector('.show').className = "welcome";
document.getElementById(t.dataset.target).className = "welcome show";
}
.welcome {
display: none;
}
.show {
display: block;
}
.button {
background-color: #0095ff;
border-color: #07c;
cursor:pointer;
padding:0px 20px;
}
<button type="button" class="button" data-target="welcome1" onclick="showDiv(this)">1</button>
<button type="button" class="button" data-target="welcome2" onclick="showDiv(this)">2</button>
<button type="button" class="button" data-target="welcome3" onclick="showDiv(this)">3</button>
<br/>
<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>
Using radio button
If you are trying without a loop as you have n set of a and div, then I would suggest to go with a hidden radio button method
function showDiv(t) {
document.getElementById(t.rel).click();
}
.answer_list {
display: none;
}
.webrad {
display: none;
}
.webrad:checked+.answer_list {
display: block;
}
.text1 {
background-color: #0095ff;
border-color: #07c;
cursor:pointer;
padding:0px 20px;
}
<div class="websites">
<a title='Project 1' rel="welcomeRadio" class="text1" onclick="showDiv(this)">Project 1</a>
<a title='Project 2' rel="welcomeRadio1" class="text1" onclick="showDiv(this)">Project 2</a>
</div>
<div class="websites">
<input id="welcomeRadio" class="webrad" type="radio" name="websites" />
<div id="welcomeDiv" class="answer_list">cv.pdf<object data="cv/cv.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
</object></div>
<input id="welcomeRadio1" class="webrad" type="radio" name="websites" />
<div id="welcomeDiv1" class="answer_list">6.pdf<object data="cv/6.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
</object></div>
</div>

How to get the sidebar to not interact?

I want to make a webpage that adds points when you click on it. There is a sidebar(just a left column) where there are images that act as checkboxes. Selecting one image gets you 1 point when you click on the page, selecting the other gives 5...
However, I don't want to have the sidebar give points. It means that when you click on it, it only changes the selected image, without adding points. Everything is working except the "not adding points on the sidebar" part. I tried the following code, but it doesn't work:
function addPoint(number) {
points = points + number;
document.getElementById('points').innerHTML = points;
};
function pointsAmount() {
chkBox1 = document.getElementById('picture1').checked;
addPoint(chkBox1 ? 1 : 0);
chkBox2 = document.getElementById('picture2').checked;
addPoint(chkBox2 ? 5 : 0);
chkBox3 = document.getElementById('picture3').checked;
addPoint(chkBox3 ? 10 : 0);
chkBox4 = document.getElementById('picture4').checked;
addPoint(chkBox4 ? 20 : 0);
};
function checkPicture(x, y) {
document.getElementById(x).checked = y;
}
function Border(x, y) {
document.getElementById(x).style.borderColor = y;
}
function onPageload() {
checkPicture('picture1', true);
Border('pic1', 'yellow');
}
window.onload = onPageload;
window.onmousedown = function(e) {
if (e.target.className != 'float-left-area') {
pointsAmount();
}
}
var points = 0;
body {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
input[type=checkbox] {
display: none;
}
input[type=button] {
display: none;
}
.float-left-area {
position: absolute;
width: 20%;
float: left;
background-color: #dddddd;
border: 3px solid black;
height: 99%;
}
.float-right-area {
float: right;
width: 80%;
height: 100%;
}
.inner-left {
font-size: 2em;
}
img.size {
width: 3em;
height: 3em;
}
<div class="float-left-area">
<div class="inner-left">
<label for="picture1"><div id="pic1" style="border: 5px solid black;"><img src="eslcc_logo2.png" alt="eslcc logo" style="float:left;" class="size" /><p align="right">1</p></div></label>
<input id="picture1" type="checkbox" onchange="checkPicture('picture1', true)" onclick="
checkPicture('picture2', false);
checkPicture('picture3', false);
checkPicture('picture4', false);
Border('pic1', 'yellow');
Border('pic2', 'black');
Border('pic3', 'black');
Border('pic4', 'black');" />
<label for="picture2"><div id="pic2" style="border: 5px solid black;"><img src="imac_2.jpg" style="float:left;" class="size" alt="iMac" /><p align="right">5</p></div></label>
<input id="picture2" type="checkbox" onchange="checkPicture('picture2', true)" onclick="
checkPicture('picture1', false);
checkPicture('picture3', false);
checkPicture('picture4', false);
Border('pic2', 'yellow');
Border('pic1', 'black');
Border('pic3', 'black');
Border('pic4', 'black');" />
<label for="picture3"><div id="pic3" style="border: 5px solid black;"><img src="coding_img.png" style="float:left;" class="size" alt="iMac" /><p align="right">10</p></div></label>
<input id="picture3" type="checkbox" onchange="checkPicture('picture3', true)" onclick="
checkPicture('picture1', false);
checkPicture('picture2', false);
checkPicture('picture4', false);
Border('pic3', 'yellow');
Border('pic1', 'black');
Border('pic2', 'black');
Border('pic4', 'black');" />
<label for="picture4"><div id="pic4" style="border: 5px solid black;"><img src="ariane_6.jpg" style="float:left;" class="size" alt="Ariane 6"/><p align="right">20</p></div></label>
<input id="picture4" type="checkbox" onchange="checkPicture('picture4', true)" onclick="
checkPicture('picture1', false);
checkPicture('picture2', false);
checkPicture('picture3', false);
Border('pic4', 'yellow');
Border('pic1', 'black');
Border('pic2', 'black');
Border('pic3', 'black');" />
</div>
</div>
<div class="float-right-area">
<div class="inner-right">
<p align="center">Points: <span id="points">0</span></p>
Also, no jQuery please.

Not sure if this is what you want:
I remove the bulky code in the checkbox input and set different values in the attribute (i.e. value, data-pic), then consolidate all actions in the function addPoint(number).
I have also modified function pointsAmount() by using for loop to get the points of selected picture. And points will only be added when you click on the right side area.
function addPoint(number) {
points = points + number;
document.getElementById('points').innerHTML = points;
}
function checkPicture(x, y) {
document.getElementById(x).checked = y;
}
function Border(x, y) {
document.getElementById(x).style.borderColor = y;
}
function selectPicture(selectedPic) {
var checkboxes = document.getElementsByName('picture');
for (var i = 0; i < checkboxes.length; i++)
{
var id = checkboxes[i].id;
var pic = checkboxes[i].getAttribute('data-pic');
// Default state and style
checkPicture(id, false);
Border(pic, 'black');
if (id == selectedPic.id)
{
checkPicture(id, true);
Border(pic, 'yellow');
}
}
}
function pointsAmount() {
var checkboxes = document.getElementsByName('picture');
for (var i = 0; i < checkboxes.length; i++)
{
if (checkboxes[i].checked)
{
var value = parseInt(checkboxes[i].value);
addPoint(value);
}
}
}
function onPageload() {
checkPicture('picture1', true);
Border('pic1', 'yellow');
}
window.onload = onPageload;
window.onmousedown = function(e) {
if (e.target.className == 'float-right-area') {
pointsAmount();
}
}
var points = 0;
<div class="float-left-area">
<div class="inner-left">
<label for="picture1">
<div id="pic1" style="border: 5px solid black;">
<img src="eslcc_logo2.png" alt="eslcc logo" style="float:left;" class="size">
<p align="right">1</p>
</div>
</label>
<input id="picture1" type="checkbox" name="picture" data-pic="pic1" value="1" onclick="selectPicture(this)">
<label for="picture2">
<div id="pic2" style="border: 5px solid black;">
<img src="imac_2.jpg" style="float:left;" class="size" alt="iMac">
<p align="right">5</p>
</div>
</label>
<input id="picture2" type="checkbox" name="picture" data-pic="pic2" value="5" onclick="selectPicture(this)">
<label for="picture3">
<div id="pic3" style="border: 5px solid black;">
<img src="coding_img.png" style="float:left;" class="size" alt="iMac">
<p align="right">10</p>
</div>
</label>
<input id="picture3" type="checkbox" name="picture" data-pic="pic3" value="10" onclick="selectPicture(this)">
<label for="picture4">
<div id="pic4" style="border: 5px solid black;">
<img src="ariane_6.jpg" style="float:left;" class="size" alt="Ariane 6">
<p align="right">20</p>
</div>
</label>
<input id="picture4" type="checkbox" name="picture" data-pic="pic4" value="20" onclick="selectPicture(this)">
</div>
</div>
<div class="float-right-area">
<div class="inner-right">
<p align="center">Points: <span id="points">0</span></p>
</div>
</div>

Change Icon on click and add a css class through javascript

I'm trying to make a expandable h3. For that I'll have a "plus" image to click and when it's clicked has to change to a "minus" image and I need to add a css class to the h3 to show the content. I'll paste all the code below:
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br /> [Posts] [Pager]
</div>
<div style="clear: both"></div>
And here is the javascript:
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
element.src = element.bln ? right : left;
element.bln = !element.bln;
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});

you can use .attr function of jquery to set image source like
$('.img-selector').attr('src','plusorminusimagepath.jpg');
and you can have a boolean flag to know if it is less or more

Here i was changing alt attribute of image tag on click. the same way you can change src
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
if ($(this).attr("alt") == "+") {
$(this).attr("alt", "-");
} else {
$(this).attr("alt", "+");
}
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img alt="+" src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br />[Posts] [Pager]
</div>
<div style="clear: both"></div>

You should use a sprite image and CSS, else when you click and it will load another image, for some time between image would disappear.
HTML
<div class="head">
<h1 class="blogname">
[BlogName] <span class="plus icon"></span></h1>
[RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3>
[Author]</div>
<br />
CSS
.icon{
width:30px;
height:30px;
display:inline-block;
background-image:url(plus-minus-sprite-image.png);
}
.icon.plus{
background-position:20px center;
}
.icon.minus{
background-position:40px center;
}
JS
$('.icon').click(function(){
$(this).toggleClass("plus minus");
if($(this).hasClass("plus")){
$('.blogdescription').addClass("ExpandBlogDescriptionText");
}else{
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
}
// Or $('.blogdescription').toggleClass("ExpandBlogDescriptionText");
});

$("#ExpandBlogDescriptionImg").click( function(e){
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
if($(e.currentTarget).attr('img') == left){
$(this).hide();
$(e.currentTarget).attr('img',right);
}else{
$(this).show();
$(e.currentTarget).attr('img',left);
}
});

How can I toggle texts and icons using jQuery?

I have an accordion.
When I click on show details :
the accordion content will expand,
the text will change from show details to hide details
the icon will change from + to x
click on it again should toggle back to its original state.
I couldn't get it to work. When I click on it, it stuck on the HIDE DETAILS state forever.
JS
$(".show-details-sk-p").click(function () {
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
});
Can someone please give me a little push here ?
I've put together a Fiddle - just in case it is needed.

Inspected the aciton and element behavior, find that #sk-p-r will have class in to decide whether its collapsed or not.
$(".show-details-sk-p").click(function () {
var isCollapse = $('#sk-p-r').hasClass('in');
var text = isCollapse ? 'SHOW DETAILS' : 'HIDE DETAILS';
var img = isCollapse ? 'http://s6.postimg.org/e9eydpbct/plus.png' : 'http://s6.postimg.org/bglqtob0d/remove.png'
$(".show-details-txt-sk-p-r").text(text);
$(".icon-sk-p-r-toggle").attr("src", img);
});

There's a lot of ways you can do this but your problem is that your 'click' doesn't have any way to set the 'show details' state from the code you have there.
In a really simple solution for this:
$(".show-details-sk-p").click(function () {
$(this).toggleClass('open')
if($(this).hasClass('open') === true){
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
}else{
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
}
});
This is one way to do it. I'm adding a class to the element here to track state and then conditionally setting the image and text based on that state to give you a true toggle. There are likely smarter and more efficient ways to do this but this should be a simple enough example to point you into the right direction.

I have added a boolean variable which is toggled whenever the accordion is clicked. Check out this fiddle
var show=false; //indicates whether the accordion is hidden
$(".show-details-sk-p").click(function () {
if(!show){
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
show=true;
}
else{
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
show=false;
}
});
I have used the show variable to determine what text to display on the accordion.

You need to revert text and image when collapsing an accordion
/* JavaScript */
$(".show-details-sk-p").click(function() {
if ($(this).data('shown') === true) {
$(this).data('shown', false);
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
} else {
$(this).data('shown', true);
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
}
});
/* CSS */
.sk-p-dash {
padding-left: 25px;
}
.panel {
border-radius: 0px !important;
}
.sk-p {
margin-right: 16px;
margin-left: 16px;
}
.panel-title,
.panel-body {
font-size: 10px;
}
.show-details-txt-sk-p-r {
padding-right: 12px;
}
.show-details-sk-p {
font-size: 9px;
padding-right: 5px;
}
.show-details-sk-p .icon-sk-p-r-toggle {
margin-top: -5px;
}
<!-- HTML -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="row sk-p">
<div class="col-md-12">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
PRE-REQUISITE(S) FOR ALL SKILLS IN EXERCISE
<span data-toggle="collapse" data-parent="#accordion" href="#sk-p-r" class="show-details-sk-p pull-right">
<span class="show-details-txt-sk-p-r">SHOW DETAILS</span>
<img width="20px" class="icon-sk-p-r-toggle" src="http://s6.postimg.org/bglqtob0d/plus.png">
</span>
</h4>
</div>
<div id="sk-p-r" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-lg-6">
<span>SOLVING EQUATIONS BY ADDITION OR SUBSTRACTION </span>
<br>
<br>
<div class="sk-p-dash">
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
<span>WATCH VIDEO</span>
<br>
<br>
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
<span>REVIEW LESSON</span>
</div>
</div>
<div class="col-lg-6">
<span>GRAPHING INEQUALITIES IN ONE VARIABLE </span>
<br>
<br>
<div class="sk-p-dash">
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
<span>WATCH VIDEO</span>
<br>
<br>
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
<span>REVIEW LESSON</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Simply toggle
better store the string values in variables
var txtHide = "HIDE DETAILS";
var txtShow = "SHOW DETAILS";
var rmvImage = "http://s6.postimg.org/e9eydpbct/remove.png";
var plsImage = "http://s6.postimg.org/bglqtob0d/plus.png";
$(".show-details-sk-p").click(function () {
$(".show-details-txt-sk-p-r").text($(".show-details-txt-sk-p-r").text()==txtHide ? txtShow :txtHide );
$(".icon-sk-p-r-toggle").attr("src",$(".icon-sk-p-r-toggle").attr("src")==rmvImage ? plsImage :rmvImage );
});
Check http://jsfiddle.net/ZigmaEmpire/bpaxpuhz/2/