• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 445
  • Last Modified:

Nested Accordion...

With the following code, only the top control collapses but not the second one. If it is practical,  I need to have nested accordion. Please see the attached image comparing what I have and what ideally I want to create.
nested accordion
<!DOCTYPE html>
<html><head><title>More Descriptions</title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>   
	<link rel="stylesheet" type="text/css" href="./styles/resume.css"/>
	  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
          #accordion {
        width:97%;
        height: 50px;
        line-height: 50px;
        vertical-align: middle;
      }

      img {
        float:left;
      }

  </style>
  <script>

   $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content",collapsible: true
      });
            $("#foo").click();
  });
  
  </script>
</head>
<body>
<div class="content">
		<div class="btn-group-vertical">
			<a href="index.html" class="btn btn-default">Resume</a>
			<a href="demo.html" class="btn btn-default">Demos...</a>
			<a href="code.html" class="btn btn-default">Codes...</a>
			<a href="certificate.html" class="current btn btn-default">Certificates...</a>
			<a href="more.html" class="btn btn-default">More...</a>

				<div class="btn-group">
					<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
						Download
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">Resume.docx</a></li>
						<li><a href="#">Resume.pdf</a></li>
					</ul>
				</div>

		</div>
   <div class="wrapper">
            <div class="left-col">Note: This site is under Construction.&nbsp;
         <!--      <span class="contactBlue">Contact:</span><br/>
               <span>MEghtebas@gmail.com</span><br/>
               <span>Phone: (949) 533-8239</span><br/> -->
            </div><!--div class="left-col contact"-->

            <div class="verticalGapTop">&nbsp;</div>

            <div class="right-col nameBlock">
              <p>
				<span class="name">Certificates...xx</span><br>

				<span class="title">&nbsp;</span><br>
			  </P>
            </div>
            
      <div class="horizontalGap">&nbsp;</div>   

            <div class="left-colBottom">
                <span class="contactBlue">Left</span><br/>
 
            </div>
            <div class="verticalGapBottom">&nbsp;</div>

            <div class="right-colBottom">
   
				<h2>Microsoft</h2>
				<div id="accordion">
				<h2 id="foo">Microsoft Technology Associate, MTA 98-364</h2>
				<div>
					<ul>
					  <li>
						MTA Database track, data platyform adminstration and business intelligence.
						Passed on January 2015.
					  </li>
					</ul>
				</div>
				<h3>Querying Microsoft SQL Server 2012, MCSA 70-461</h3>
				<div>
					<p>
						
						Querying Microsoft SQL Server 2012<br>
						Create database objects (tables, views, indexes, constraints, etc.)<br>
						Queries (select, sub-queries, implement data types, aggregate queries, xml data)
						
					</p>
				</div>
            </div>	

			<br><br>
                <h2>Expert Exchange</h2>
				<div id="accordion">
				
  <h3 id="foo">Genius 1,000,000 points</h3>
  <div>
    <ul>
      <li>Microsoft Access Database</li>
    </ul>
  </div>
  <h3>Sage 500,000 points</h3>
  <div>
    <p>
Microsoft Access Database
    </p>
  </div>
  <h3 id="bar"> Wizard 300,000 points </h3>
  <div>
    <ul>
      <li>Microsoft Access Database</li>
    </ul>
  </div>
  <h3> Guru 150,000 points</h3>
  <div>
    <ul>
<li>Microsoft Access Database</li>
<li>Access Forms</li>
<li>Access Coding/Macros</li>
</ul>

  </div>
    <h3> Master 50,000 points </h3>
  <div>
    <ul>
<li>Microsoft Access Database</li>
<li>Access Forms</li>
<li>Access Coding/Macros</li>
<li>SQL Query Syntax</li>
<li>Access Reports</li>
<li>.NET</li>
<li>C# Programming Language</li>
<li>MS SQL Server</li>
<li>Programming for ASP.NET</li>
</ul>
  </div>
                </div>
            </div>

   </div>
   </div>
<!--    </form> -->
<div class="footer"> 
        <div class="note"><span>March 2015 update, single page</span> </div>
       <div class="cssLogo"><img style="border:0;width:44px;height:15px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue"  alt="Valid CSS!" /> </div>
</div>
</body>
</html>

----- if you need the css file:----------
html{background : rgb(244,244,244)  
    url(../images/html.png) repeat-x;
}
body{
    font-family:"Tahoma","sans-serif";
    color : #5a1c46; 
    margin:0;
    padding-top: 30px; 
     /*font-size:90%; */
	color:rgb(89,89,89);	
	background : url(../images/body.png) repeat-x; 
}
.content
{
   margin: 0 auto;
   padding-left: 0px;
   padding-bottom: 0px;
   width: 1065px;/* 866px*/
    height:1080px; /* to be removed*/
   
}

.center1{text-align:center;}



.wrapper
{
   margin: 0 auto auto 10em;
   padding-top: 35px;
   padding-left: 50px;
   padding-bottom: 35px;
   width: 880px;/* 866px*/
   /* height:1080px;  to be removed*/
   background-color:white;
  
   -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
   -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);

}
.horizontalGap
{ 
   width: 776px;/* 726*/
   border: 0px solid black;
   background-color:#eef;
   height: 10px;
}
.verticalGapTop
{
   width: 10px;
   background-color:#eef;
   height:4.7em;
   display:inline-block;
   vertical-align: top;
}
.verticalGapBottom
{
   width: 10px;
   border: 0px solid black;
   background-color:#eef;
   height:1140PX;
   display:inline-block;
   vertical-align: top;
}
.left-col, .right-col{
    display:inline-block;
	vertical-align: top;
}
.right-colBottom
{
    border: 0px solid black;
    display:inline-block;
	width:586px;/* 536px*/
	padding-left: 5px;
    border: 0px solid orange;
    display:inline-block;
}
.left-col
{
    width:180px; 
    margin-right:0;
	padding-right: .5em;
	text-align:right;
	display:inline-block;
	vertical-align: top;
}
.contact
{
	color:rgb(89,89,89);
	text-align:right;
	white-space: nowrap;
	height:4em;
	display:inline-block;
    border: 0px solid black;
}
.left-colBottom
{
    width:180px;
	padding-right: 0.5em;
	padding-top: 1.5em;
	text-align:right;
    white-space: nowrap;	
    display:inline-block;
	vertical-align: top;
}

.right-col{
    width:586px;/* 536px*/
    border: 0px solid black;
    display:inline-block;
}
.date{
    width: 60px;
	/*border: 0px solid red;
	display:inline-block
	text-align:top;;*/
	float:left;
}
.companyCity
{
    width:518px;/* 468px*/
	border: 0px solid red;
    display:inline-block;
}

.company
{
  width: 315px;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
  border: 0px solid yellow;
  display:inline-block;
  }

.city
{
  width:197px;/* 55*/
  min-width:10em;
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
  text-align:right;
  border: 0px solid green;
  font-weight:bold;
  display:inline-block;
}
.companyOther{
 width:150px;
  font-weight:bold;
  white-space: nowrap;
  border: 0px solid red;
  display:inline-block;
}
.cityOther{
  width:360px;/* 310px*/
  min-width:10em;
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
  text-align:right;
  border: 0px solid green;
  font-weight:bold;
  display:inline-block;
}
.workDescription{
    width:100%;
	min-width:10em;
	border: 0px solid blue;
    text-align:justify;
    display:inline-block;
}
.skills ,.skillsDescription{
    width:581px;/* 531px*/
	border: 0px solid blue;
    text-align:justify;
}

.experience{
    width:581px;/* 531px*/
	border: 0px solid green;
    display:inline-block;
}


.contactBlue{
  font-size:1.1em;
  font-weight:bold;
  white-space: nowrap;
  color:rgb(84,142,212);
}
.nameBlock{
  text-align:center;
  height:4em;
  display:inline-block;
}
.name{
  font-size:2em;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
}
.title{
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
}

.blue18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(84,142,212);
}
.black18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(89,89,89);
}

.others
{
  color:rgb(187,74,36);
  font-size:.9em;
}
.cssLogo
{
    float:right;
     float: right;
    border: 0px solid black;
}
.note
{
    float: left;
    border: 0px solid green;
}
.footer {
    margin: 0 auto;/*40px auto auto auto; */
    padding: 10px 0px 25px 100px;

    width: 866px;/*816px */	
    text-align:left;
    font-size:.8em;
    border: 0px solid red;
}
/* ggggggggggggggggggggggggggggggg */
.btn-group-vertical
{
   width: 120px;
   float:left;
   padding-top: 10em;
   position:fixed;
   
}
.btn-group-vertical ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.btn-group-vertical li 
{ 
	/*margin: 0 0 .2em 0; */
	width:3em;
	color:red;
}

.btn-group-vertical a
{
	/*display: block;*/
	color: #FFFFFF;
	
	background-color: rgb(137, 137, 137);
	/*width: 5em;
	padding: .2em .2em;
	text-decoration: none;*/
	text-align: left;
}

/*.btn-group-vertical a:hover
{
	background-color: #336699;
	color:rgb(84,142,212);
	font-weight:bold;
}*/
.btn-group-vertical a
{
font-size: 1.25em;
}
.btn-group-vertical .current a:hover
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}
/*
.btn-group-vertical .current a, .btn-group-vertical .current a:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 6em;
	padding: .2em .2em;
	text-decoration: none
};*/
.dropdown-menu a
{
	background-color: #FFFFFF;
}

a {color:rgb(89,89,89); text-decoration: none;}      /* unvisited link */
a:visited {color:rgb(89,89,89); text-decoration: none;}   /*visited link */
a:hover {color:blue; text-decoration: none;}  /* mouse over link */
a:active {color:rgb(89,89,89);text-decoration: none;}  /* selected link */

.btn-group-vertical a {color:#FFFFFF; text-decoration: none;}      /* unvisited link */
/* .btn-group-vertical a:visited {color:#FFFFFF;}  visited link */
.btn-group-vertical a:hover {color:rgb(84,142,212); font-weight:bold;text-decoration: none;}   /*mouse over link */
.btn-group-vertical a:active {color: rgb(155, 47, 45);text-decoration: none;}   /*selected link */

Open in new window

0
Mike Eghtebas
Asked:
Mike Eghtebas
1 Solution
 
Duy PhamFreelance IT ConsultantCommented:
You did use the same id="accordion" for both main groups (Microsoft and Expert Exchanges), hen second accordion didn't work for the second.

Try to use a class like .accordion-divin this: http://plnkr.co/edit/1LgxsaE764OIUhnAyc0J?p=preview

And note that you can just wrap both main groups in a div with class="accordion-div" and then you get the nested accordions as you expect.
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now