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:DesiredSectionsExpanded
<!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:existing
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,

the following change should do the trick:

Replace the line
$(".foo").click();

Open in new window

with
var headers = $('#accordion h3.ui-accordion-header');
    $('.ui-accordion-header-icon', headers).removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
    headers.next().slideUp();

Open in new window


HTH
Rainer
EE_QAccord.html
2

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

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.