Html Question posted in
Some basic documentation can be found here.

Html – Button to collape div with image and text allignment

all,

In bootstrap3, I am using a button to collapse a div, I have an image and text and alternate between:

+ More
- Less

however the image is misaligned to the text. Is there any way to allign image and test in a content: button?

HTML

<button  class="btn btn-link collapsed" 
                    data-toggle="collapse"    
                    data-target="#collapseMoreDetails">
 
</button>

CSS

button.btn.collapsed:before
{
  content: url('plusImage.svg') " More" ; 
 
}
button.btn:before {
  content: url('minusImage.svg' ) " Less" ;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i figure out I can use bootstrap and everything works perfectly aligned

    html

    <a class="btn btn-link text-toogle" data-toggle="collapse" data-target="#collapseMoreDetails" aria-expanded="false">

<span class="text-collapsed"> <span class="glyphicon glyphicon-plus-sign"></span> More Details</span>
<span class="text-expanded">  <span class="glyphicon glyphicon-minus-sign"></span> Less Details</span>

</a>

    css

    .text-toogle[aria-expanded=false] .text-expanded {
  display: none;
}
.text-toogle[aria-expanded=true] .text-collapsed {
  display: none;
}

  2. 0

    It is possible if you separate the image and text into two different pseudo elements.

    button.btn::before, button.btn::after {
  vertical-align: middle;
}

/* using custom inline svg for demonstration purpose */
button.btn.collapsed::before {
  content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Ctitle%3Eplus1%3C/title%3E%3Cpath d='M31 12h-11v-11c0-0.552-0.447-1-1-1h-6c-0.553 0-1 0.448-1 1v11h-11c-0.553 0-1 0.448-1 1v6c0 0.553 0.447 1 1 1h11v11c0 0.553 0.447 1 1 1h6c0.553 0 1-0.447 1-1v-11h11c0.553 0 1-0.447 1-1v-6c0-0.552-0.447-1-1-1z'%3E%3C/path%3E%3C/svg%3E%0A");
}

button.btn.collapsed::after {
  content: " More"
}

button.btn::before {
  content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Ctitle%3Eminus%3C/title%3E%3Cpath d='M1 12h30c0.553 0 1 0.448 1 1v6c0 0.553-0.447 1-1 1h-30c-0.552 0-1-0.447-1-1v-6c0-0.552 0.448-1 1-1z'%3E%3C/path%3E%3C/svg%3E");
}

button.btn::after {
  content: " Less"
}
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseMoreDetails"></button>
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseMoreDetails"></button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search