CODEWITHSUNDEEP
jqueryhtmlcss
dave
dave

Reputation: 7

How to position image within tab content

this is probably super simple for someone but I'm using an "accordion" jquery to display a contact list.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
        $(function() {
            $("#accordion").accordion();
        });
    </script>
</head>

<body>
    <div id="accordion">
         <h3>Section 1</h3> 
        <div>
            <p>test
                <br>Phone: xxxx
                <br>Email: [email protected]</p>
        </div>
         <h3>Section 2</h3> 
        <div>
            <p>test</p>
        </div>
         <h3>Section 3</h3> 
        <div>
            <p>test</p>
        </div>
         <h3>Section 4</h3> 
        <div>
            <p>test</p>
        </div>
    </div>
</body>

What I'd like to do is be able to have the contact's picture appear on the right hand side of each expanded box in the accordion (ideally in the top right so if i end up adding a bio or something the picture appears in the top right of the expanded box).

How would i do that? Tables with no borders? Can someone help me with the code? Thanks :)

Upvotes: 0

Views: 569

Answers (1)

Brian Phillips
Brian Phillips

Reputation: 4425

Anything you'd want inside the expanded box will need to go inside the div elements within the #accordion. From there, simply float the image to the right. Give the following a shot:

<h3>Section 1</h3>

<div> <!-- content starts here -->
  <img src="contact-image.jpg">
  <p>test
    <br>Phone: xxxx
    <br>Email: [email protected]
  </p>
</div> <!-- end content -->

CSS:

#accordion div {
  overflow: hidden;
}

#accordion img {
  float: right;
}

This is barebones CSS, so you may need to add some margin to add appropriate spacing.

Upvotes: 1

Related Questions