CODEWITHSUNDEEP
jquery
Mouse Hello
Mouse Hello

Reputation: 945

What's wrong with this jQuery accordion code?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    </head>

    <script>
        $(document).ready(function(){
            $('#accordion').accordion();
        });
    </script>

    <body>

        <ul id="accordion">
      <li>
        <a href="#">Header 1</a>
        <div>Wow, look at all this content that can be shown or hidden with a simple click!</div>
      </li>
      <li>
        <a href="#">Header 2</a>
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpatligula. Integer  
        vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut      
        bibendum velit enim eu lectus. Suspendisse potenti. </div>
      </li>
      <li>
        <a href="#">Header 3</a>
        <div>Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis.  
        Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.</div>
      </li>
    </ul>

    </body>
</html>

This code returns the first image, how do I make it to be like the second image? The styling doesn't matter though, I only want the tabs to be properly aligned like the second image

First image -> enter image description here

Second image -> enter image description here

Upvotes: 0

Views: 258

Answers (2)

Scott
Scott

Reputation: 21882

The accordian works fine. You just need some CSS.

ul {
    margin: 20px;
    border: 1px solid #00f; }
li a { 
    padding: 5px;
    background: #00f; 
    color: #fff; 
    text-align: center; 
    display: block; 
    text-decoration: none; 
    text-transform: uppercase;
    outline: none; }
 li div { padding: 20px; }

DEMO HERE

Upvotes: 2

neo108
neo108

Reputation: 5246

Add the following style and the tabs will appear as you desired...

<style>
#accordion li {
  display:inline;
  text-decoration: none;
}
</style>

See http://jsfiddle.net/neo108/yFeuJ/

Upvotes: 0

Related Questions