The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How would I properly edit the following spoiler shortcode?

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #153984

    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)

    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">

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

      -moz-box-sizing: border-box;
      background: none repeat scroll 0 0 #000000;
      display: block;
      height: 1%;
      padding-bottom: 3%;
      width: 22%;
      -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.


    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?


    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?


    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)?


    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">
    <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.


    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 :-) :

    $('.spoilerone-title').on('click', function(){
    var $t = $(this);
    .html( $t.hasClass('open') ? '&minus;' : '+' )

    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 ? :-)


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

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

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



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

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.