Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm adding a collapse function to my page, and so far it all works as it should.

I use my header text (h2) to toggle the function like this:

   <a href="javascript:animatedcollapse.toggle('collapse_002')"><h2>Header 1</h2></a>

Now, I want to add an image to the start of this. When collapsed, it's a plus-sign image. When opened, it turns into a minus-sign image.

How do I do this? I think I've got the css part figured out, and the function (code below), but just not sure how to get the images to show.

.toggleButton{
display:inline;
background-image:url(Special_images/pluss3.gif);
background-size:auto;
background-repeat:no-repeat;
}

.toggleButton.open{
display:inline;
background-image:url(Special_images/minus.gif);
background-size:auto;
background-repeat:no-repeat;
}

<!-- SCRIPT FOR TOGGLE BUTTONS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.toggleButton').click(function(){
    $(this).toggleClass("open");
});
});

</script>
<!-- END -->

What I'm trying now, that doesnt work:

<a href="javascript:animatedcollapse.toggle('collapse_001')"><div class="toggleButton"><h2>Header 1</h2></div></a>

Thanks a lot in advance, Stian Berg Larsen

EDIT:

This is one of the collapsing divs:

<a href="javascript:animatedcollapse.toggle('collapse_002')"><h2>The Operator in Focus</h2></a>
<div id="collapse_002">
<p>content goes here.. Bla bla bla bla....</p>
</div>

So this works as it should. When you click on the header the div slides out, showing the text within the div "collapse_002".

Now what I want is to display an image in front of the header, showing either a plus-sign or minus-sign if the div is open or closed.

share|improve this question
notice: h2 is not allowed to put in the a until a has display: inline and h2 has display: block style – haynar Jul 17 '12 at 13:03
Could you provide all the HTML that you're using? – Titanium Jul 17 '12 at 13:03
To fix that, just use the onclick attribute to fire your events, rather than using the <a> tag. – Titanium Jul 17 '12 at 13:05
1  
@haynar With HTML5, this is now legal. <a> is the only exception to the rule. – Ayman Safadi Jul 17 '12 at 13:13
1  
@haynar: Works when I set it to display:block in the css... Thanks! And thanks to the rest of you too! =) – Stian Berg Larsen Jul 17 '12 at 13:16
show 4 more comments

3 Answers

up vote 1 down vote accepted

I have made you a very simple image swap, using toggle, adding open class..basically just swopping background images :

http://jsfiddle.net/934bA/

*Please ignore temp background urls and sizes

Let me know if there is something else.

I hope this gives your the base understanding and that it's very simple...it's basically just an add of and class, and remove of a class = toggle.

BREAKDOWN :

Html

<div class="toggleButton"><h2>Header 1</h2></div>

Script

$(function() {
    $('.toggleButton').click(function() {
        $(this).toggleClass("open");
    });
});

CSS

.toggleButton{
    display:inline;
    background-image:url(http://upload.wikimedia.org/wikipedia/en/3/35/Plus_sign.jpg);
    background-size:20%;
    background-repeat:no-repeat;
    background-position:left;
    padding:20px;
}

.open{
    background-image:url(http://userserve-ak.last.fm/serve/252/3850515.jpg);
}

h2 {margin:0px; padding:0px;display:inline;}
share|improve this answer
up vote 1 down vote 
p {
margin:0;
padding-left:16px;
float:left;
background-image:url(images/add.png);
background-repeat:no-repeat;      
    }

p.down {
float:left;
padding-left:16px;
background-image:url(images/delete.png);
background-repeat:no-repeat;
    }
.button         
{
vertical-align:middle;
 } 
.question div   
{
border:1px solid #CC0000;
background-color:#efefef;
width:580px;
margin-top:5px;
font-size:12px;
padding:5px;
clear:left;
 } 
.question div a 
{
padding-left:20px;
background: transparent url(images/world_go.png) no-repeat center left;
text-decoration:none;
 } /

$(document).ready(function() {
  $('div.question')
    .children('div').hide().end()
    .children('p').click(function(){
      $(this).toggleClass('down').next().slideToggle("slow");
    });
});

<div class="question">

<p class="button">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. &nbsp;</p>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. 

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna.  </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
</ul>

</div>
</div>

This is a toggle with plus minus for the front of the paragraph, with a collapse toggle of the paragraph below.

share|improve this answer
So many good answers here. I cant accept more than one though =/ But thanks a lot for your help here! I'll keep it all in mind when doing this kind of stuff =) Thanks! – Stian Berg Larsen Jul 17 '12 at 13:41
up vote 0 down vote

tried background-position: 0 0; ?

share|improve this answer
i did set it to left, and it worked (when changing from inline to block.). Thanks mate! – Stian Berg Larsen Jul 17 '12 at 13:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.