Link to home
Start Free TrialLog in
Avatar of Mike Eghtebas
Mike EghtebasFlag for United States of America

asked on

Keep the 1st section of accordion controls expanded

Question: How can I keep the first section of the accordion controls expanded like in the image below when the page first loaded? Please see the attached image for how these controls look upon load.

Here is the desired sections to be expanded upon page load:User generated image
<!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> 
  <!--<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  -->
	<link rel="stylesheet" type="text/css" href="./styles/resume.css"/>
	  
  <style>
          .accordion{
        width:100%;
        line-height: 50px;
        vertical-align: middle;
      }

      img {
        float:left;
      }

  </style>
  <script>

   $(function() {
    $( ".accordion-div" ).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="Videos.html" class="btn btn-default">Videos...</a>
			<a href="Projects.html" class="btn btn-default">Projects...</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="resources/Resume_Mike_Eghtebas_March15_2015.docx">Resume.docx</a></li>
						<li><a href="resources/Resume_Mike_Eghtebas_March15_2015.pdf" target="_blank">Resume.pdf</a></li>
					</ul>
				</div>

		</div>
		
	<div class="wrapper">
   
        <div class="left-col">&nbsp;
		</div> <!-- <div class="left-col"> -->

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

		<div class="right-col nameBlock">
			<p>
				<span class="name">Mike M Eghtebas</span><br>
				<span class="title">Database Development & Web Programming</span><br>
			</P>
		</div> <!-- <div class="right-col nameBlock"> -->
           
		<div class="horizontalGap">&nbsp;</div>   

		<div class="left-colBottom">
                
		</div> <!-- <div class="left-colBottom"> -->
 			
		<div class="verticalGapBottom">&nbsp;</div>

		<div class="right-colBottom">

			<p class="name"><br>Certificates:</p>
			<div class="accordion-div">
           
				<h1>Microsoft</h1>
				<div id="accordion" class="accordion-div">
				<h2 class="foo">Microsoft Technology Associate, MTA 98-364</h2>
				
				<div>
					<ul>
					  <li>
						MTA Database track, data platyform adminstration and business intelligence.
						Passed on January 2015. <a href="./images/mta.png" target="_blank"><abbr title="Certificate">MTA 98-364</abbr></a>
					  </li>
					</ul>
				</div>
				<h3>Querying Microsoft SQL Server 2012</h3>
				<div>
					<p>
						
						Querying Microsoft SQL Server 2012<br>
						Recived <a id="A4a" href="./images/certNHZ.png" target="_blank"><abbr title="Certificate of completion">Certificate of Completion</abbr></a>
						for course 20-461 covering: <br>
						Create database objects (tables, views, indexes, constraints, etc.)<br>
						Queries (select, sub-queries, implement data types, aggregate queries, xml data)<br>
						Scheduled to pass Microsoft Exam 70-461 on December 22, 2015.
						
					</p>
				</div>
			</div><!-- <div class="accordion-div"> -->
			</div>
		  <hr>
		  
			<div class="accordion-div">
         
				<h1>Expert Exchange</h1>
				<div id="accordion2" class="accordion-div">
				<h2 class="foo">Master 50,000 points (count: 11)</h2>
				
			  <div>
				<ul>
					<li><a href="resources/eeCertificates.pdf#page=15"  target="_blank">1. Programming for ASP.NET </a></li>
					<li><a href="resources/eeCertificates.pdf#page=13"  target="_blank">2. C# Programming Language</a>  </li>
					<li><a href="resources/eeCertificates.pdf#page=16"  target="_blank">3. VB.NET Programming</a> </li>
					<li><a href="resources/eeCertificates.pdf#page=12"  target="_blank">4. .NET</a> </li>
					<li><a href="resources/eeCertificates.pdf#page=14"  target="_blank">5. MS SQL Server</a></li>
					<li><a href="resources/eeCertificates.pdf#page=17"  target="_blank">6. MS SQL Server 2008 Access</a></li>
					<li><a href="resources/eeCertificates.pdf#page=10"  target="_blank">7. SQL Query Syntax</a></li>
					<li><a href="resources/eeCertificates.pdf#page=9"  target="_blank">8. Access Coding/Macros</a></li>
					<li><a href="resources/eeCertificates.pdf#page=8"  target="_blank">9. Access Forms</a></li>
					<li><a href="resources/eeCertificates.pdf#page=11"  target="_blank">10. Access Reports</a></li>
					<li><a href="resources/eeCertificates.pdf#page=7"  target="_blank">11. Microsoft Access Database</a></li>
				</ul>
			  </div>
			  
				<h2 class="foo">Guru 150,000 points (count: 3)</h2>
			  <div>
				<ul>
					<li><a href="resources/eeCertificates.pdf#page=4"  target="_blank">12. Microsoft Access Database</a></li>
					<li><a href="resources/eeCertificates.pdf#page=5"  target="_blank">13. Access Forms</a></li>
					<li><a href="resources/eeCertificates.pdf#page=6"  target="_blank">14. Access Coding/Macros</a></li>
				</ul>
			  </div>
			  
				<h2 class="foo">Wizard 300,000 points  (count: 1)</h2>
			  <div>
				<ul>
					<li><a href="resources/eeCertificates.pdf#page=3"  target="_blank">15. Microsoft Access Database</a></li>
				</ul>
			  </div>

				<h2 class="foo">Sage 500,000 points (count: 1)</h2>
				
			  <div>
				<ul>
					<li><a href="resources/eeCertificates.pdf#page=2"  target="_blank">16. Microsoft Access Database</a></li>
				</ul>
			  </div>
			  
				<h2 class="foo">Genius 1,000,000 points (count: 1)</h2>
				
			  <div>
				<ul>
					<li><a href="resources/eeCertificates.pdf#page=1"  target="_blank">17. Microsoft Access Database</a></li>
				</ul>
			  </div>				  
		
			</div><!-- <div class="accordion-div"> -->
			</div>		
			<br><br>
		  <hr>		  
		  <!--	-->
		</div> <!-- <div class="right-colBottom"> -->
	</div> <!-- <div class="wrapper"> -->

	<div class="footer"> 
        <div class="note"><span>September 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>

</div><!-- <div class="content"> -->
</body>
</html>

Open in new window

Existing:User generated image
ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Mike Eghtebas

ASKER

Thank you.