Question

You can see the implementation here: http://jsfiddle.net/CtLpz/3/

Basically what I want to happen is, when you click on the image in the middle (the ‘add client’ from box1 for example), you see the textboxes in the middle of the dashed panel (similar to the way the image was before it was clicked).

The same should also happen in all the other boxes.

Thanks.

Answer 1

Your stylesheet uses margin-top to adjust the positions of the images. If you instead, place these images and text in a block-element, such as a div, then you can replace the contents of this element in your jQuery code and the new contents will be styled similarly. Here is a working version: http://jsfiddle.net/treyh/AjycL/

---

HTML Before

<img src="images/add-client-head-icon.png" /><br />
Add Client

HTML After

<div class='middle'>
    <img src="images/add-client-head-icon.png" /><br />
    Add Client
</div>

---

JavaScript Before

$(this).children().html("Enter Client Name <input type='text' /><br /><input type='submit' value='Submit'/>");

JavaScript After

$(this).find('.middle').html("Enter Client Name <input type='text' /><br /><input type='submit' value='Submit'/>");

---

CSS Before

#add-client .dashed-panel img {
    margin-top: 20%;
}

CSS After

#add-client .dashed-panel .middle {
    margin-top: 20%;    
}