Div's width decreases when show slide animation is playing - javascript

When my card title is clicked, its content shows or hides with the show slide jquery animation .show('slide', {direction: 'up'}, 'slow') / .hide('slide', {direction: 'up'}, 'slow'. The problem is that during the animation the width of .content-annales decreases so there is a lack of continuity with the .title-annales div on the right side.
Here is an example of the problem: click here
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
if (jQuery(this).next().css('display') === 'none') {
element.css('border-radius', '20px 20px 0px 0px');
jQuery(this).next().show('slide', {
direction: 'up'
}, 'slow', function() {
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
});
} else {
jQuery(this).next().hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
});
}
});
<div class="card-annales">
<div class="title-annales">
<span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
<h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
</div>
<div class="content-annales">
[...]
</div>
</div>
EDIT : I've tried to replicate the issue on jsfiddle but it works perfectly here. I use a bootstrap based theme (Hestia for Wordpress) and when I remove from the bootstrap css file the property box-sizing: border-box;, it works like in the jsfiddle.

I wasn't able to reproduce the behavior that you mentioned, but have a possible solution for you. Add width: calc(100% - 20px); to .content-annales.
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
if (jQuery(this).next().css('display') === 'none') {
element.css('border-radius', '20px 20px 0px 0px');
jQuery(this).next().show('slide', {
direction: 'up'
}, 'slow', function() {
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
});
} else {
jQuery(this).next().hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
});
}
});
.card-annales {
display: block;
margin-bottom: 20px;
}
.title-annales {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px 20px;
background-color: #012f51;
color: #ff6501;
font-size: 1.7em;
border: gray 1px solid;
padding: 10px 30px;
cursor: pointer;
}
.content-annales {
border-left: gray 1px solid;
border-right: gray 1px solid;
border-bottom: gray 1px solid;
padding: 10px;
border-radius: 0px 0px 20px 20px;
display: none;
width: calc(100% - 20px); /* added */
}
.float-right {
float: right;
}
.float-left {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="card-annales">
<div class="title-annales">
<span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
<h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
</div>
<div class="content-annales">
[...]
</div>
</div>

I've finally fixed the issue.
1. Probable cause of the issue
When .show('slide', { direction: 'up'}, 'slow') is executed, jquery-ui sets a fixed width to the selected div which seems to not take into consideration the padding (padding: 10px for .content-annales). See what happened during the jquery animation:
I don't really understand why the padding is not taked into account as it works perfectly in the jsfiddle shared in my question. It could be link to box-sizing: border-box; which is set for all html according to my theme. In fact, when I disable it, the issue disappear.
2. My solution
It's quite simple : I've encapsulated .content-annales in a parent div called .content-annales-toggle which has no style except display: none;. My animation now shows/hides up .content-annales-toggle so there is no issue with the padding.
Here is the new code :
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
if (jQuery(this).next().css('display') === 'none') {
element.css('border-radius', '20px 20px 0px 0px');
jQuery(this).next().show('slide', {
direction: 'up'
}, 'slow', function() {
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
});
} else {
jQuery(this).next().hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
});
}
});
<style>
.card-annales {
display: block;
margin-bottom: 20px;
}
.title-annales {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px 20px;
background-color: #012f51;
color: #ff6501;
font-size: 1.7em;
border: gray 1px solid;
padding: 10px 30px;
cursor: pointer;
}
.content-annales-toggle {
display: none; /* edited */
}
.content-annales {
border-left: gray 1px solid;
border-right: gray 1px solid;
border-bottom: gray 1px solid;
padding: 10px;
border-radius: 0px 0px 20px 20px;
display: block; /* edited */
}
.float-right {
float: right;
}
.float-left {
float: left;
}
</style>
<div class="card-annales">
<div class="title-annales">
<span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
<h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
</div>
<div class="content-annales-toggle">
<div class="content-annales">
[...]
</div>
</div>
</div>

I think this is related to overflow when the content is rendered. Consider the following:
https://jsfiddle.net/Twisty/zqk9johc/
JavaScript
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
var nextEl = element.next();
var parentEl = element.parent();
var iconUp = $("<i>", {
class: "fas fa-chevron-circle-up"
});
var iconDown = $("<i>", {
class: "fas fa-chevron-circle-up"
});
if (nextEl.css('display') === 'none') {
nextEl.show('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px 20px 0px 0px');
jQuery('.span-msg-mediadroit-annale', element).html(iconUp);
});
} else {
nextEl.hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
jQuery('.span-msg-mediadroit-annale', element).html(iconDown);
});
}
});
Nothing vastly different in the code, yet in the Fiddle I have added 5 paragraphs. When the content is shown, a scroll bar is rendered by the browser as the content extends beyond the current window height. The scroll bar being rendered seems to re-flow the content of the document.
If you add some CSS:
html {
overflow-y: scroll;
}
The Scroll Bar is already rendered and no re-flow is needed.
Example: https://jsfiddle.net/Twisty/zqk9johc/5/
Hope that helps.

Please remove the padding from the class "content-annales" and wrap inner content on div and adding padding to the same.
Please check the code below:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="card-annales">
<div class="title-annales">
<span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
<h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
</div>
<div class="content-annales">
<div class="inner-section">
[...]
</div>
</div>
</div>
<style>
.card-annales {
display: block;
margin-bottom: 20px;
}
.title-annales {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px 20px;
background-color: #012f51;
color: #ff6501;
font-size: 1.7em;
border: gray 1px solid;
padding: 10px 30px;
cursor: pointer;
}
.content-annales {
border-left: gray 1px solid;
border-right: gray 1px solid;
border-bottom: gray 1px solid;
border-radius: 0px 0px 20px 20px;
display: none;
}
.inner-section {
padding: 10px;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
</style>
<script>
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
if (jQuery(this).next().css('display') === 'none') {
element.css('border-radius', '20px 20px 0px 0px');
jQuery(this).next().show('slide', {
direction: 'up'
}, 'slow', function() {
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
});
} else {
jQuery(this).next().hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
});
}
});
</script>

Related

jQuery contents() when used with 'iframe' , text disappears in firefox

I'm trying to make a website, somewhat similar to jsbin.com.
Here is a snap of how it looks in ...
Firefox -
ScreenShot
Chromium - ScreenShot
Take a look at code !
$(".toggleButton").hover(function() {
$(this).addClass("hightlightedButton");
}, function() {
$(this).removeClass("hightlightedButton");
});
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("hightlightedButton");
});
$(".panel").height($(window).height() - $("#header").height() - 14);
$(".panel").width(($(window).width() / 2) - 5);
$("iframe").contents().find("html").html($("#htmlPanel").val());
body {
font-family: sans-serif;
padding: 0;
margin: 0;
}
#header {
width: 99.2%;
background: #EEEEEE;
padding: 5px;
height: 30px;
}
#logo {
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer {
width: 244px;
margin: 0 auto;
}
.toggleButton {
float: left;
border: 1px solid grey;
padding: 6px;
border-right: none;
font-size: 90%
}
#html {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid grey;
}
.active {
background-color: #E8F2FF;
}
.hightlightedButton {
background-color: grey;
}
textarea {
resize: none;
border-top: none;
border-color: grey;
}
.panel {
float: left;
}
iframe {
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<textarea id="htmlPanel" class="panel" name="textarea">Hello World!</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
(Take a note that when you run the above code with build-in run function of Stack over, the 'iframe' doesn't appear.)
Check out exact code : 'Paste Bin'
Problem Description
As you can see in Screenshots of Firefox Browser the Hello World! is not visible in the second tab, but in Screenshots of Chromium Browser can see it (in the second half of screen).
Main Line of code (I think) which needs to edited is in <script type="text/javascript"></script> (Tag).
$("iframe").contents().find("html").html($("#htmlPanel").val());
How to get the output same in Firefox, like it's in other browsers (Chromium)?
Extra:
Solutions I tried, that are not working
iframe content disappears on Firefox (from stack-overflow)
Jquery contents() change html for iframe disappear in firefox (from stack-overflow)

How to change color of div element depending on color of the block with JavaScript?

I have 2 blocks for user to choose from and they should be interactive. The block changes the color and the vertical line color should be changed to opposite. I wonder if I could make it right in the same code snippet which does the color change of the code block, because previously I made it, but with another for loop and it's not the fastest way.
let vanOption = document.getElementsByClassName("van-quote-option");
let quoteVl = document.getElementById("option-vl");
// Van option selection
for (var x = 0; x < vanOption.length; x++) {
vanOption[x].addEventListener("click", function() {
var currentOption = document.getElementsByClassName("option-active");
if (currentOption.length > 0) {
currentOption[0].className = currentOption[0].className.replace(" option-active", "");
}
this.className += " option-active";
});
}
.van-quote-option {
display: flex;
justify-content: space-evenly;
margin: 25px 165px 20px 165px;
border: 1px solid grey;
cursor: pointer;
transition: 0.5s;
}
.option-active {
background-color: #18A063;
color: #fff;
}
.quote-vl {
border-left: 2px solid #13985C;
height: 116px;
}
.quote-vl-active {
border-left: 2px solid #fff;
height: 116px;
}
.quote-icon {
margin: 25px 0 0 35px;
}
.quote-van-icon {
font-size: 49px;
padding: 8px;
border-radius: 50%;
height: 60px;
background-color: rgb(245, 245, 245);
color: #18A063;
}
.quote-car-icon {
font-size: 49px;
padding: 9px;
height: 52px;
background-color: rgb(245, 245, 245);
color: #18A063;
border-radius: 50%;
}
.quote-bicycle-icon {
font-size: 49px;
padding: 10px;
height: 55px;
background-color: rgb(245, 245, 245);
color: #18A063;
border-radius: 50%;
}
.quote-p {
text-align: left;
}
.quote-p-van {
text-align: left;
margin-top: 5px;
}
.bicycle-quote-vl,
.car-quote-vl {
height: 124px;
}
.quote-price {
display: flex;
flex-direction: column;
justify-content: center;
}
.quote-price-van {
margin-top: 10px;
}
.van-send-price,
.car-send-price,
.bicycle-send-price {
font-size: 25px;
font-weight: 700;
}
.van-send-price::before,
.car-send-price::before,
.bicycle-send-price::before {
content: "\00A3";
}
<div class="quote-options">
<div class="van-quote-option option-active">
<div class="quote-icon quote-icon-1">
<i class="fas fa-truck quote-van-icon"></i>
</div>
<div class="quote-p-van">
<div class="quote-p-1">Sending 1 or 2 items (with van)</div>
<br />
<div class="quote-p-2">
We'll take a maximum of 2 items for you<br />
to deliver immediately at any location.
</div>
</div>
<div class="quote-vl quote-vl-active"></div>
<div class="quote-price-van">
<span class="van-send-price" id="van-deliver-price">14</span><br />
For a max.<br />
of 2 items.
</div>
</div>
<div class="van-quote-option">
<div class="quote-icon quote-icon-1">
<i class="fas fa-truck quote-van-icon"></i>
</div>
<div class="quote-p-van">
<div class="quote-p-1">Hire a van</div>
<br />
<div class="quote-p-2">
We'll take a maximum of 2 items for you<br />
to deliver immediately at any location.
</div>
</div>
<div class="quote-vl"></div>
<div class="quote-price-van">
<span class="van-send-price" id="van-deliver-price">38</span><br />
Hire a van,<br />
∞ items
</div>
</div>
</div>
You can fix this with css.
You don't really need the quote-vl-active class. Remove it.
You can refer to the vertical line when it's active using option-active since it's the child of that element.
.option-active > .quote-vl {
border-left: 2px solid white;
height: 116px;
}
See this fiddle: https://jsfiddle.net/29r1v0Lo/
might want to use onclick vs. adding listeners as well.
Here is a jsfiddle of it a bit cleaner and with the vert bar having the opposite color: https://jsfiddle.net/7L0uzkxj/
You can just have the CSS control the vert bar:
.quote-vl {
border-left: 2px solid green;
height: 116px;
}
.option-active .quote-vl {
border-left: 2px solid white;
height: 116px;
}
You can then clean up the JS to look like this:
function triggerMe(evt) {
let vanOption = document.getElementsByClassName("van-quote-option");
[...vanOption].forEach(x => {
if (x.classList.contains('option-active')) {
x.classList.remove('option-active');
}
})
evt.classList.toggle('option-active');
}

How do I add/remove div color onclick of the div but not the button?

I have an add and remove button which selects the complete div and adds a green color to the div. The function only works on the "add this extra" and "remove" button. How do I make it work like clicking anywhere on the div instead of the particular button itself?
I would look to hear someone help from you guys.
Regards,
Bilal
$('.btn_extras').addClass('force-hide');
$('.btn-rmv-item').hide();
// Add btn onClick
$('.btn-add-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).next("button.btn-rmv-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").addClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// Remove btn onClick
$('.btn-rmv-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).prev("button.btn-add-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").removeClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// function to Show/Hide Continue Button w.r.t SELECTIONS
function showHideContinueBtn() {
$('.btn_extras').addClass('force-hide').removeClass('force-block');
$('.btn_skip').removeClass('force-hide').addClass('force-block');
$('div.card').each(function(index) {
if($(this).hasClass('card-bg')) {
$('.btn_extras').removeClass('force-hide').addClass('force-block');
$('.btn_skip').removeClass('force-block').addClass('force-hide');
}
});
}
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button class="btn btn-add-item">Add this extra</button>
<button class="btn btn-rmv-item">Remove</button>
</div>
<div class="clearfix"></div>
</div>
You can have the click handler directly on the div (I assume it is .card-border here).
And you need only one button which you toggle the classes and change the text.
I added a .card-bg CSS rule that seemed to be missing in the question...
I also added type="button" to prevent form submission if the button is clicked.
Have a look at the comments in the code below. It replaces the two click handlers you had... And the showHideContinueBtn() function.
$(".card-border").on("click",function(){
// Toggle the div background color
$(this).toggleClass("card-bg");
// Find the button
var btn = $(this).find(".btn");
// Toggle classes for ONE button
btn.toggleClass('btn-add-item btn-rmv-item');
// Depending on a button's class, change it's text
(btn.hasClass("btn-rmv-item"))?btn.text("Remove"):btn.text("Add this extra");
});
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
/* This class was not posted in question... So I improvised one */
.card-bg{
background-color:#44bb44;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button type="button" class="btn btn-add-item">Add this extra</button>
<!--button class="btn btn-rmv-item">Remove</button-->
</div>
<div class="clearfix"></div>
</div>
Change
$('.btn-add-item').on('click', function(e) {
to
$(e.currentTarget).closest("div.card-border").on('click', function(e) {
If you want a toggle functionality, also add a variable that holds the crt state:
var state="default";
...on('click',function(){
if(state=='default'){
state='checked';
....
} else {
state='default';
....
}
});
If I understood you question right then this is answer you are looking for.
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()" style="width:200px; height:100px; border: 1px solid black;">
This Div's background color will change.
</p>
<script>
var color=0;
function myFunction() {
// Just Specify The Id you need
var myDiv = document.getElementById("demo");
if(color == 0)
{
myDiv.style.backgroundColor = "red"; color=1;
}
else
{
myDiv.style.backgroundColor = "white"; color=0;
}
}
</script>
</body>
</html>
Hope This Solves the Issue.

Clear data attribute on click

I have a function that copies the data attribute and gives it an active class. I need to be able to clear the active class from .copy-btn when either .close1 or .close2 is clicked.
$(document).ready(function() {
$(".copy-btn").click(function(event) {
event.preventDefault();
});
});
var clip = new Clipboard(".copy-btn");
$(".copy-btn").click(function(e) {
$.each($(".copy-btn"), function(index, value) {
if (
$(value).attr("data-text") ==
$(e.target).attr("data-text")
) {
$(value).addClass("active");
}
});
});
.btn {
width: 50px;
height: 20px;
border: 2px solid;
cursor: pointer;
}
.copy-btn {
outline: none;
cursor: pointer;
border: none;
background-color: white;
font-size: 21px;
}
.active {
border-bottom: 3px dotted green;
padding-bottom: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="copy-btn" data-text="CODE1">CODE1</p>
<p class="copy-btn" data-text="CODE2">CODE2</p>
<p class="copy-btn" data-text="CODE3">CODE3</p>
<div class="btn close1">Close 1</div>
<div class="btn close2">Close 2</div>
Just using removeClass()
$('.close1, .close2').on('click', function() {
$('.copy-btn').removeClass('active');
})

how to finalize the spoiler

There is a code http://jsfiddle.net/VWCnd/5/. How to add the indicators ↓ ↑.
Example image http://i.stack.imgur.com/OxpaP.png
Js:
$(document).ready(function(){
$('.spoiler_title').click(function(){
$(this).parent().children('div.spoiler_toggle').toggle();
return false;
});
});
html:
<div>
Title
<div class="spoiler_toggle">
<div class="spoiler_bg">Body</div>
</div>
</div>
CSS:
.spoiler_title {
display:block;
background-color: #551A8B;
color: #fff;
padding: 10px 10px;
}
.spoiler_toggle {
display:none;
}
.spoiler_bg {
background: #9C6AC9;
padding: 5px 5px;
}
Thanks.
You could always do something like this:
http://jsfiddle.net/VWCnd/7/
$('.spoiler_title').click(function(){
var $this = $(this),
visible = $this.parent().children('div.spoiler_toggle').toggle().is(':visible');
$this.find('.spoiler_indicator').html(visible? '↑' : '↓');
return false;
});
HERE IS THE DEMO
CODE -
JS:
$(document).ready(function(){
$('.spoiler_title').click(function(){
$(this).find(".sp_but").text(($(this).find(".sp_but").text() == '↓' ? '↑' : '↓'))
$(this).parent().children('div.spoiler_toggle').toggle();
return false;
});
});
HTML:
<div>
Title <span class="sp_but">↓</span>
<div class="spoiler_toggle">
<div class="spoiler_bg">Body</div>
</div>
</div>
CSS:
.spoiler_title {
display:block;
background-color: #551A8B;
color: #fff;
padding: 10px 10px;
}
.spoiler_toggle {
display:none;
}
.sp_but{
float: left;
margin-right:20px;
}
.spoiler_bg {
background: #9C6AC9;
padding: 5px 5px;
}

Categories