CODEWITHSUNDEEP
jquerycsstoggle
Carmen
Carmen

Reputation: 57

jQuery toggle show/hide with image plus text

I have found this jquery toggle code here. Now I would like to add a text "Click to Open" that is vertically aligned to the middle of the image.

This is the code:

CSS:

.toggle{
    display:inline-block;
    height:48px;
    width:48px;
    background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle.expanded{
    background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
}

jQuery:

$(document).ready(function(){
    var $content = $(".content").hide();
    $(".toggle").on("click", function(e){
        $(this).toggleClass("expanded");
        $content.slideToggle();
    });
});

HTML:

<div class="toggle"></div>
<div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Any thoughts?

Upvotes: 1

Views: 10234

Answers (2)

PSL
PSL

Reputation: 123739

Like this?

Add :after pseudo elements to toggle, and some line height.

.toggle:after{
    content:"Click to Open";
    display:block;
    height:48px;
    line-height:48px;
    width:88px;
    margin-left:48px;
}
.toggle.expanded:after{
     content:"Click to Close";
}

Demo

Or try this way:

Html:

<div class="toggle">
  <span class="image"></span>
  <span class="text">Some Random text here. Hello</span>
</div>

Css:

.toggle {
    height:48px;
    line-height:48px;
}
.toggle .image {
    vertical-align:middle;
    display:inline-block;
    height:48px;
    width:48px;
    background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle .text {
    margin-left : 10px;
}

Demo

Upvotes: 1

Lance
Lance

Reputation: 4820

Make the div.toggle an img instead of a div. Set the src attribute to the background-image that's specified in the CSS. Give the img the following CSS

vertical-align:middle;

Give the div.content a display of inline. Use the following JS

var $content = $(".content").hide();
 $(".toggle").on("click", function(e) {
    $(this).attr("src", "http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
    $content.slideToggle();
 });

The problem is that the text that you want to vertically align is much too long and once it creates a line break, whatever text is below the line break won't be aligned along the center of the img.

See the new jsFiddle

Upvotes: 0

Related Questions