Question

Its ok as below:

align top http://www.kerrydeaf.com/aa.png

The problem: When I click the accodion to open and you can see ‘+’ and ‘-‘ icons appeared at the same time. It is because the text heading is spread to two lines. It is ok when it one line only.

align top http://www.kerrydeaf.com/bb.png

How do I force ‘+’ and ‘-‘ icons to appear as ‘-‘ only when opened.

I use jQuery 1.7 and it is for iPhone.

This is the CSS:

  .trigger {padding:0px;margin:0; background:url(../images/toggle_small.svg) no-repeat right; background-position:100% -20px; } 
  .trigger a{color: #636363;text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-family:opensans;font-weight:normal; }

HTML:

    <div class="toogle_wrap">
        <div class="trigger"><a href="#"><span class="trig">8.</span> lorem lorem lorem lorem lorem lorem lorem lorem</a></div>
        <div class="toggle_container">
        <ul class="lists">
        <li>Lorem ipsum consectetur adipisicing elit</li>
        <li>Lorem ipsum consectetur adipisicing elit</li>
        <li>Lorem ipsum consectetur adipisicing elit.</li>
        </ul>
        </div>
    </div>

JS:

<script type="text/javascript">
     var $ = jQuery.noConflict();
     $(function() {
         $('#tabsmenu').tabify();
         $(".toggle_container").hide(); 

         $(".trigger").click(function(){
         $(this).toggleClass("active").next().slideToggle("slow");
         return false;
         });
     });
</script>

Answer 1

You are using a sprite

+-----+
|  -  |
|  +  |
+-----+

and when the heading breaks onto two lines the other parts of the sprite “bleed” into the view. You just need to increase the padding between the single parts of the sprite.

+-----+
|  -  |
|     |
|     |
|  +  |
+-----+

This only occurs when it is opened, because the open-icon is placed above the close-icon.

If you dont want to edit the sprite, you can introduce an additional element which holds the icons and declare a fixed height and overflow hidden on it.

<div class="toogle_wrap">
        <div class="trigger"><a href="#">...<span class="open"></span></a></div>

.open{
   background:      /* declare your background-image here*/
   height:          /* exact height of the - sign*/
   overflow:hidden; /* prevent bleeding*/
}

do the same fore the closed-state.