how to align image & text...

[Ron Wolpa]

I have a script that toggles opened & closed states of text paragraphs. At the left of closed paragraph there is an image that is switched as the link is clicked and collapses the paragraph text. I have had difficulties with aligning image and text, so I am asking you a suggestion how to do this. Below I posted the most relevant parts of code.

 

~~~~~~~~~~~~~~~~~~

js

<!--

function toggleMe(a){

var e=document.getElementById(a);

var i = document.getElementById(a + '_image');

if(!e)return true;

if(e.style.display=="none"){

e.style.display="block"

i.src = 'images/showhidetext_opened.png';

} else {

e.style.display="none"

i.src = 'images/showhidetext_closed.png';

}

return false;

}

// -->

~~~~~~~~~~~~~~~~~~~~~~~~

HTML

<script src="js/show_hide_text.js" type="text/javascript"></script>

......

<p>

<a style="cursor:pointer;" onClick="return toggleMe('para1')" class="expandtext">

<img id="para1_image" src="images/showhidetext_closed.png" style="border:0;margin-right:5px;vertical-align:middle;" />

Paragraph 1

</a>

</p>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

css

.expandtext {

/* font-family: C H I V O */

font-family:"chivoregular";

font-size:28px;

line-height:1.0em;

font-weight:300;

color:#151515;

text-align:left;

letter-spacing:-1px;

margin-top:-20px;

}

 

 

[davej]

A image of what you want would be very helpful. It would also be helpful to know the dimensions of the two images.

Edited November 14, 2013 by davej