How would I properly edit the following spoiler shortcode?

[iizag]

Hi I use a plugin for spoilers called “symple shortcodes”. This plugin comes with a Spoiler function that I am trying to manipulate. The problem is , is that I only want to change SOME spoilers but not all to the following : I want the title of the spoiler to remain like 20px in width ( nice and small and compact) but when the user clicks the spoiler I want ONLY the content to extend to 100% of the page. One example of this is my “View sources” spoiler at the end of my posts using a plugin I am trying to get rid of. You can see how I was able to change this plugins spoilers ( which is what I want to recopy but for this new shortcodes plugin)

http://iamdentistry.com/general-health/why-are-sodas-bad-for-your-teeth/

The following code is how I have the spoiler so far on my Page that I want to make look like the above link.

<div class="suspoilersources-title">
[symple_toggle title="View Article Sources"]
  <div class="suspoilersources-container">
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  </div>
[/symple_toggle]
</div>

The added divs CSS that is not working ( but it was my attempt) is the following css code :

.suspoilersources-title{
  -moz-box-sizing: border-box;
  background: none repeat scroll 0 0 #000000;
  display: block;
  height: 1%;
  padding-bottom: 3%;
  width: 22%;
}
.suspoilersources-container{
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: -moz-use-text-color #DDDDDD #DDDDDD;
  border-image: none;
  border-right: 1px solid #DDDDDD;
  border-style: none solid solid;
  border-width: 0 1px 1px;
  padding: 15px;
  background: none repeat scroll 0 0 #FF0000;
  height: 3%;
  position: absolute;
  width: 100%;
}

What can I change from my divs to get this to work right ? because for example, if I take out the position absolute then the whole spoiler including the content just takes the shape of the width of the title regardless of the width I set. But if I leave it as absolute the content under the spoiler does not get pushed down and all the words just clump up on top of the other content below the spoiler.

[iizag]

Hi Thanks so much for your help! Before I can fully try your suggestion I have a silly question. The “Then added this tiny bit of jQuery to control the spoiler” Part. I add that jquery code to my child functions php?

[iizag]

Hi thanks for helping me again :-)

Ok I did the change to the code and put it into my functions in my child theme and I made a java script file and put that code that you told me in it. But nothing is happening. The spoiler is not opening. You can see in example of the spoiler I created using your way in this page ( it is the last spoiler on the bottom of the page)

The Test page I set up with the spoiler link…

What can I be doing wrong?

[iizag]

I made a file called ” childjava.js ” and put the modified code in and dragged it into the folder list area of my child theme via ftp. ? is not supposed to go in my child theme (to prevent lost work on theme updates)?

[iizag]

Ok I tried this again and did it through my theme Java files and not my child theme and it works!!! :-)

I have some questions though.

1.) since I added the code through my main theme and did not put the java script file in my child theme doesn’t that mean I will lose the custom javascript changes when I update my theme?

2.) How would I make the entire spoiler clickable including the words instead of just “+” ? because this does not work:

<button><div class="spoilerone-title"> + View Article Sources</div></button>
<div class="spoilerone-container">
OR
<div class="spoilerone-title"> <button><+ View Article Sources</div></button>
<div class="spoilerone-container">

. Thank you SOOOO much for helping me I am very grateful :-)

O you can check the test page I set up again ( the link I put in the older comment) to see how it looks right now.

[iizag]

Hi , no problem about the delay :-) Thank you for helping me yet again !

I put this in my java file ( to replace the other code ) O and I named it .spoilerone-title so that’s why in the code its like that :-) :

jQuery(function($){
$('.spoilerone-title').on('click', function(){
var $t = $(this);
$t
.toggleClass('open')
.html( $t.hasClass('open') ? '−' : '+' )
.parent().next().slideToggle();
});
});

But this does not work ? When I hit the open button on the spoiler the title disappears , the content does not show, and only the plus / minus signs show after.

Any advice ? :-)

[Alen]

You are trying to style a tag which doesn’t exist. Try this:

.spoilerone-title:hover {
  text-decoration: underline;
}

[Alen]

Also at smaller scree sizes take the 18% width off of the spoiler code. It looks like this:
on.

off.

[Soren]

You could maybe use jQuery and toggle a class inside your function?

[chrisburton]

http://stackoverflow.com/a/8331950/938664

[Author]

Posts