• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 556
  • Last Modified:

CSS3: Toggle icons on two lines. It should be one line.

You can see '+' and '-' icons as attached that look funny when the accordion heading is opened and you can see it spread to two lines with '+' and '-' icons. It should read '-' when opened, not '+' and '-'. It look fine when it closed. It is not when it is opened, see as attached.

There is no problem with '+' and '-' icons when closed and one line heading text either open or closed.

This is trigger CSS3 CODE:
.trigger{padding:0px;margin:0; background:url(../images/toggle_small.svg) no-repeat right; background-position:100% -20px; } /* background:url(../images/toggle.png) */
.trigger a{color: #636363;text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-family:opensans;font-weight:normal; } /* 8a50c1 medium purple */

Open in new window


This is a full accordion script including trigger '+' and '-' icons.
ul.lists{ padding:0 0 15px 0;}
.toogle_wrap{background-color:#e4f6f8; border:1px #bfeaf0 solid; -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:92%; padding:3% 4%; margin:5px 0 10px 0;} /* e4f6f8 10% cyan BG */  /* margin:5px 0 15px 0; 15 increases space between bars. */
.toogle_wrap:hover {background-color:#bfeaf0; border:1px #bfeaf0 solid;} /*  #bfeaf0; light cyan #48c4d2; cyan. background-color:#e0f0dc; Light Green border:1px #b8dcae solid;Darker Green. */
.toogle_wrap:focus {background-color:#e4f6f8; border:1px #bfeaf0 solid;} /*  #bfeaf0; light cyan #48c4d2; cyan. background-color:#e0f0dc; Light Green border:1px #b8dcae solid;Darker Green. */
.toogle_wrap_intro{background-color:#fff; border:1px #bfeaf0 solid;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:92%; padding:3% 4%; margin:5px 0 10px 0;} /* e4f6f8 10% cyan BG */  /* margin:5px 0 15px 0; 15 increases space between bars. */
.trigger{padding:0px;margin:0; background:url(../images/toggle_small.svg) no-repeat right; background-position:100% -20px; } /* background:url(../images/toggle.png) */
.trigger a{color: #636363;text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-family:opensans;font-weight:normal; } /* 8a50c1 medium purple */
span.trig{color:#003f5e; font-size:16px;font-family:opensansbold;font-weight:bold;}  /* Change font size to 16 from 18px */
span.bold{color:#cb088c; font-size:12px;font-family:opensansbold;font-weight:bold;}  /* content text bold. Change from navy #003f5e; to magenta for impact and visibility. */
.active {background-position:100% 0px; }
.trigger a:hover, .trigger a:hover:focus{color:#000;}    /* background-color:#eb088c; color:#48c4d2; */
.toggle_container{overflow: hidden;padding:15px 0 0 0;clear: both;}

Open in new window

aa.png
bb.png
0
Redscrapbook
Asked:
Redscrapbook
  • 2
1 Solution
 
RedscrapbookAuthor Commented:
Using a sprite

+-----+
|  -  |
|  +  |
+-----+
and when the heading breaks onto two lines the other parts of the sprite "bleed" into the view. Need to increase the padding between the single parts of the sprite.

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

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

Open in new window

0
 
RedscrapbookAuthor Commented:
Sort it through google and tried.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now