?
Solved

jquery accordion auto adjust bar

Posted on 2013-12-21
4
Medium Priority
?
403 Views
Last Modified: 2013-12-23
I have this code:

http://jsbin.com/ETESUqA/6/edit

I have 2 questions:
1.-How can I do to the blue background auto expand to the width of the browser automatic no needed to do in the height. This auto width must not affect the size and position of the accordion.
2.-How can I make to return to original state of the color green of the tabs if you close all tabs because if you see if you close all tabs the last tab opened stay on gray. In other words if all the tabs closed after navigate on any tab all the tabs must have the color green of original state.
Tried to move something in CSS but I just messes the colors.
Thank you
0
Comment
Question by:coerrace
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39733923
1) Width of blue background full width.

Change the width of the accordion to 100% AND get rid of all the inline css and place that in your external css.  At the same time, make sure the outer tags do not limit to a specific width.
    #accordion {
        padding: 10px 100px 10px 100px;
      width: 100%;
        background-color: blue;
      
    }
You will need to play with this more but this is the idea http://jsbin.com/ETESUqA/11/edit
 
<div style="height:170px;">
        <h3 class="docs">Drag bottom right corner to resize</h3>
     
    <h2>    </h2>
        <div id="accordion">
            <h3>Section 1</h3>
            <div>
                <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
            </div>
            <h3>Section 3</h3>
            <div>
                <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </div>
            <h3>Section 4</h3>
            <div>
                <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
            </div>
        </div>
 
</div>
 
</div>
 
</body>
</html>
 

Open in new window

0
 

Author Comment

by:coerrace
ID: 39734865
ok I tested but I if you noted doing that the problem at least here is that grow everything width including the green area the green tabs must not be affected is just the blue area.
By your side you look just width the blue area?
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39735340
Ok, I added an accordion wrapper http://jsbin.com/ETESUqA/19/edit?html,css,output

Please double check your html.  You had either an extra closing div just under

<div style="position:absolute;left:28px;top:396px;width:885px;height:196px;">

or at the bottom, I assumed it was at the bottom.  


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title><meta name="viewport" content="width=990">
  
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    
    <style>
    #accordion-resizer {
        padding: 10px;
        width: 350px;
        height: 500px;
        background-color: red;

	
    }

    #accordion {
        padding: 10px 100px 10px 100px;
	width: 150px;
      
	
    }
      #accordion_wapper{
        background-color:blue;
        width:100%;
        
        
      }
        html { overflow-x: hidden; }
    h2 { 
      background: black;
      color: white;
      padding: 10px 0;
      position: relative;
    }
    h2:before, h2:after {
      content: "";
      background: black;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 9999px;
    }
    h2:before {
      right: 100%;
    }
    h2:after {
      left: 100%;
    }
    
    h2:nth-of-type(1), h2:nth-of-type(1):before, h2:nth-of-type(1):after { background: #dc4916; }
    h2:nth-of-type(2), h2:nth-of-type(2):before, h2:nth-of-type(2):after { background: #6871b1; }
    h2:nth-of-type(3), h2:nth-of-type(3):before, h2:nth-of-type(3):after { background: #d1b935; }
    
    .left-only:after {
      display: none;
    }
    
    .right-only:before {
      width: 20px;
    }
    </style>
    <script>
    $(function() {
        $( "#accordion" ).accordion({
 	   autoHeight: false,
           heightStyle: "content",
           active: false,
           collapsible: true

        });
    });
    $(function() {
        $( "#accordion-resizer" ).resizable({
            minHeight: 140,
            minWidth: 200,
            resize: function() {
                $( "#accordion" ).accordion( "refresh" );
            }
        });
    });
    </script>
<style type="text/css">
body{margin:0;padding:0;}
</style>
</head>

<body text="#000000" style="background:#ffffff; height:1000px;">
<div style="background-color:#808000;">
<div style="position:absolute;left:28px;top:396px;width:885px;height:196px;">
    
</div>

<div style="height:170px;">
        <h3 class="docs">Drag bottom right corner to resize</h3>
     
    <h2>    </h2>
    <div id="accordion_wapper">
        <div id="accordion">
            <h3>Section 1</h3>
            <div>
                <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
            </div>
            <h3>Section 3</h3>
            <div>
                <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </div>
            <h3>Section 4</h3>
            <div>
                <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
            </div>
        </div>

</div>
  </div>


</body>
</html>

Open in new window

0
 

Author Closing Comment

by:coerrace
ID: 39735901
Works very good thank you.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question