jQuery accordion - first tab open on visit

Question

I recently uploaded my personal portfolio site online (www.edwardmanson.com) and have been attempting to find out ways to keep the first tab in the accordion section (About Me) open when anyone visits the site.

$(document).ready(function() { 
$(".desc").hide();  
$("h3.open-close").click(function(){  
if ($(this).is(".current"))
{
$(this).removeClass("current");
$(this).next(".desc").slideUp(400);
}
else
{
$(".desc").slideUp(400);
$("h3.open-close").removeClass("current");

$(this).addClass("current");
$(this).next(".desc").slideDown(400);
}
});
});

Answer 1

It looks like you're not using the JQuery accordion but a custom build accordion. My advise it to change it to the JQUery accordion. By default the first accordion will be open, which is what you're after.

To get this effect in your example, simply add this to your custom.js file:

$(".desc:first").show();

Add this in exactly this place (this is how your JS file looks like

/***************************************************
TOGGLE JAVASCRIPT
***************************************************/
$(document).ready(function() {

$(".desc").hide();
$(".desc:first").show(); // <-- ADD IT HERE, AFTER THIS FIRST HIDE() CALL!

If you want to keep to first one open at all times, then simply remove the 'desc' class from the first h3 tag in your html file.

Small example:

/***************************************************
TOGGLE JAVASCRIPT
***************************************************/
$(document).ready(function() {
    
$(".desc").hide();
    $(".desc:first").show(); // THIS LINE IS ADDED!!!
$("h3.open-close").click(function(){
if ($(this).is(".current"))
{
$(this).removeClass("current");
$(this).next(".desc").slideUp(400);
}
else
{
$(".desc").slideUp(400);
$("h3.open-close").removeClass("current");
$(this).addClass("current");
$(this).next(".desc").slideDown(400);
}
});
});

    html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
body {
    background-color: #F2F3F3;
    background-image: url("images/bg.jpg");
    background-repeat: repeat;
    color: #333333;
    font-family: 'DroidSerifRegular',Arial,sans-serif;
    font-size: 13px;
    line-height: 22px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
A:link {
    color: #333333;
    text-decoration: none;
}
A:visited {
    text-decoration: none;
}
A:active {
    text-decoration: none;
}
A:hover {
    color: #57AEAE;
    text-decoration: none;
}
@font-face {
    font-family: "BebasRegular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/BEBAS___-webfont.eot?#iefix")  format("embedded-opentype"), url("fonts/BEBAS___-webfont.woff")  format("woff"), url("fonts/BEBAS___-webfont.ttf") format("truetype"),  url("fonts/BEBAS___-webfont.svg#BebasRegular") format("svg");
}
@font-face {
    font-family: "DroidSerifRegular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/DroidSerif-Regular-webfont.eot?#iefix")  format("embedded-opentype"),  url("fonts/DroidSerif-Regular-webfont.woff") format("woff"),  url("fonts/DroidSerif-Regular-webfont.ttf") format("truetype"),  url("fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular")  format("svg");
}
@font-face {
    font-family: "DroidSerifBold";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/DroidSerif-Bold-webfont.eot?#iefix")  format("embedded-opentype"), url("fonts/DroidSerif-Bold-webfont.woff")  format("woff"), url("fonts/DroidSerif-Bold-webfont.ttf")  format("truetype"),  url("fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold") format("svg");
}
@font-face {
    font-family: "GoudyBookletter1911Regular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/goudybookletter1911-openamp.eot?iefix")  format("eot"), url("fonts/goudybookletter1911-openamp.woff")  format("woff"), url("fonts/goudybookletter1911-openamp.ttf")  format("truetype"),  url("fonts/goudybookletter1911-openamp.svg#webfont0ZQvEa4G")  format("svg");
}
.openamp {
    font-family: GoudyBookletter1911Regular;
}
h1.fontface {
    color: #57AEAE;
    font: 34px/44px 'BebasRegular',Arial,sans-serif;
    letter-spacing: 0;
    text-shadow: 1px 1px 1px #FFFFFF;
}
h2.fontface {
    color: #666666;
    font: 18px/27px 'DroidSerifBold',Arial,sans-serif;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
h3.fontface {
    color: #666666;
    font: 18px/27px 'BebasRegular',Arial,sans-serif;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
h4.fontface {
    color: #F1F2F2;
    font: 10px/23px 'DroidSerifBold',Arial,sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 0 0 #FFFFFF;
}
#header {
    background-color: #57AEAE;
    height: 8px;
    position: relative;
    width: 100%;
}
#wrap {
    min-height: 100%;
}
#main {
    margin: 0 auto;
    min-height: 100%;
    overflow: auto;
    padding-bottom: 100px;
    position: relative;
    width: 970px;
}
#logo {
    float: left;
    padding-top: 30px;
    width: 960px;
}
#logo_text {
    float: left;
}
#social {
    float: right;
    margin-top: 25px;
}
#twitter {
    float: right;
}
#facebook {
    float: right;
    padding-right: 10px;
}
#mail {
    float: right;
    padding-right: 10px;
}
#slider_container {
    background-color: #FFFFFF;
    float: left;
    height: 260px;
    margin-bottom: 30px;
    margin-top: 30px;
    padding: 5px;
    width: 950px;
}
.theme-default #slider {
    height: 260px;
    width: 950px;
}
#container {
    float: left;
    margin-bottom: 30px;
    margin-top: 30px;
    overflow: hidden;
    padding: 0;
    width: 960px;
}
#accordian_wrap {
    float: left;
    width: 960px;
}
.open-close {
    background-image: url("js/images/open.png");
    background-position: right 13px;
    background-repeat: no-repeat;
    font-family: 'BebasRegular';
    position: relative;
    text-shadow: 1px 1px 1px #FFFFFF;
    width: 100%;
}
.open-close a {
    background-image: url("js/images/border.gif");
    background-position: left bottom;
    background-repeat: repeat-x;
    color: #57AEAE;
    display: block;
    font-size: 24px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-decoration: none;
    text-transform: uppercase;
}
.open-close a:hover {
}
.current {
    background-attachment: scroll;
    background-image: url("js/images/close.png");
    background-position: right 13px;
    background-repeat: no-repeat;
    color: #189ACB;
}
.desc {
    background-image: url("js/images/border.gif");
    background-position: left bottom;
    background-repeat: repeat-x;
    overflow: hidden;
    padding-bottom: 20px;
    padding-top: 20px;
}
#content-top {
    border-bottom: 3px solid #349BA8;
    float: left;
    height: 24px;
    width: 100%;
    z-index: 8;
}
#close-tab {
    background-image: url("js/images/close1.png");
    background-position: center top;
    background-repeat: no-repeat;
    height: 24px;
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    z-index: 99;
}
#close-tab a {
    display: block;
    height: 100%;
    width: 100%;
    z-index: 99;
}
#welcome {
    float: left;
    width: 150px;
}
#welcome_info {
    margin-top: 10px;
}
.photo_frame {
    background-color: #FFFFFF;
    float: left;
    height: 150px;
    margin-top: 5px;
    padding: 5px;
    width: 150px;
}
#hello {
    float: left;
    padding-left: 75px;
    width: 500px;
}
#hello_info {
    margin-top: 10px;
}
#skills {
    float: left;
    padding-left: 60px;
    width: 175px;
}
#skills_info {
    margin-top: 10px;
}
#ticks {
    float: left;
    margin-top: 2px;
}
#info {
    float: right;
    line-height: 23px;
    padding-right: 30px;
}
#cv {
    float: left;
    padding-top: 5px;
    width: 175px;
}
#cv_logo {
    float: left;
    margin-top: -5px;
}
#cv_info {
    float: right;
    line-height: 20px;
    padding-right: 75px;
}
.gallery_frame {
    background-color: #FFFFFF;
    float: left;
    height: 150px;
    margin-left: 20px;
    margin-top: 5px;
    padding: 5px;
    width: 150px;
}
.empty {
    float: left;
    height: 15px;
    width: 960px;
}
#blog {
    float: left;
    margin-right: 7px;
    width: 960px;
}
#blog_info {
    margin-bottom: 10px;
    margin-top: 10px;
}
#contact {
    float: left;
    margin-right: 7px;
    width: 250px;
}
#contact_info {
    margin-top: 10px;
}
#ways {
    float: left;
    margin-left: 70px;
    width: 350px;
}
#ways_info {
    margin-top: 10px;
}
#form {
    float: left;
    margin: 0;
    position: relative;
    width: 900px;
}
#form p {
    color: #999999;
    padding-right: 25px;
    padding-top: 15px;
}
#form div {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 300px;
}
#form div label {
    display: block;
    font-size: 0.9em;
    width: 310px;
}
.success {
    background-color: #FFFFFF;
    float: left;
    padding: 20px 30px;
    width: 920px;
}
.error {
    color: #CC0000;
    font-size: 11px;
    position: absolute;
    right: 12px;
    top: 0;
}
#form input, textarea {
    background-color: #EEEEEE;
    border-color: #C7C7C7 #E6E6E6 #E6E6E6 #C7C7C7;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
    color: #CCCCCC;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin: 0 0 8px;
    padding: 11px 5px;
    width: 275px;
}
#form textarea {
    height: 85px;
    width: 300px;
}
#form input:focus, textarea:focus {
    background-color: #E1E1E1;
    border-color: #B4B4B4 #D6D6D6 #D6D6D6 #B4B4B4;
    color: #666666;
}
#form .submit {
    background-attachment: scroll;
    background-color: #57AEAE;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: #EEEEEE;
    cursor: pointer;
    float: right;
    font-family: 'DroidSerifRegular',Arial,sans-serif;
    font-size: 13px;
    margin-bottom: 0;
    margin-right: -15px;
    margin-top: 0;
    padding-bottom: 6px;
    padding-top: 6px;
    position: relative;
    text-align: center;
    width: 315px;
}
#form .submit:hover, .submit.focus {
    background-color: #666666;
    color: #FFFFFF;
}
#form em {
    color: #CCCCCC;
    font-size: 0.9em;
    font-style: italic;
}
#footer {
    background: url("images/bg_footer.gif") repeat scroll 0 0 transparent;
    clear: both;
    height: 50px;
    margin-top: -50px;
    position: relative;
}
body:before {
    content: "";
    float: left;
    height: 100%;
    margin-top: -32767px;
    width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="accordian_wrap">
  <div id="container">
    
    <h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">About Me</span></a></h3>
    <div class="desc" style="display: none;"> <!-- REMOVE DESC TO KEEP IT OPEN AT ALL TIMES!! -->
      <div id="welcome">
        <h3 class="fontface">Welcome</h3>
        <div id="welcome_info">
          <div class="photo_frame"> <img src="http://placehold.it/150x150"> </div>
        </div>
      </div>
      <div id="hello">
        <h3 class="fontface">Hello</h3>
        <div id="hello_info">
          <p class="fontface">I'm Edward Manson a web and graphics designer based in Belfast. I'm currently on my placement year working at Visionworks Interactive where I'm getting the opportunity to work on several projects as well as working within a dedicated and experienced team. I like anything that's compelling, intuitive and bespoke and try to implement these ideals when developing new ideas and pieces of work. I enjoy everything about design and work hard to always meet the goals of all parties involved. Have a look
            at my work and if you have any queries or questions please feel free to get in contact.</p>
        </div>
      </div>
      <div id="skills">
        <h3 class="fontface">Skills</h3>
        <div id="skills_info">
          <div id="ticks">
            <p><img src="images/ticks.png"></p>
            </div>
          <div id="info">
            <p>HTML &amp; CSS </p>
            <p>Javascript &amp; Jquery </p>
            <p>Graphics &amp; Layouts </p>
            <p>PHP, Wordpress</p>
            </div>
         
            <div id="cv">
        <div id="skills_info">
          <div id="cv_logo">
            <p><img src="images/cv.png"></p>
            </div>
          <div id="cv_info">
            <p><a href="images/personal_cv1.docx">View my CV</a></p>
            
            </div>
        </div>
      </div>
   
          
        </div>
      </div>
    </div>
    
    
    
    <h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">My Work</span></a></h3>
    <div class="desc" style="display: none;">
      <div class="photo_frame"><a title="Rapid International Website Design" href="images/rapid.png" rel="example_group"><img src="images/rapid_1.png"></a></div>
      <div class="gallery_frame"><a title="Comhairle Interactive Map" href="images/map.png " rel="example_group"><img src="images/map_1.png"></a></div>
      <div class="gallery_frame"><a title="Alternative Heat Website Design" href="images/alternative_heat.png" rel="example_group"><img src="images/alternativeheat_1.png"></a></div>
      <div class="gallery_frame"><a title="Omagh Town Centre Website Design" href="images/omagh-web.png " rel="example_group"><img src="images/omagh_1.png"></a></div>
      <div class="empty"></div>
     
    </div>
    
    
    
    <h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">Blog</span></a></h3>
    <div class="desc" style="display: none;">
      <div id="blog">
        <h3 class="fontface">September</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        
         <h3 class="fontface">October</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        
           
         <h3 class="fontface">November</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        
           
         <h3 class="fontface">December</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
    </div>
    
    
    
    
    <h3 class="open-close"><a href="javascript:void()"><span>Contact Me</span></a></h3>
    <div class="desc" style="display: none;">
      <div id="contact">
        <h3 class="fontface">Get In Contact</h3>
        <div id="blog_info">
          <p class="fontface">If you'd like to work with me or provide me with feedback or feelings on any of my work fill out the form on the right and I'll get back in contact as quick as possble. I always like to hear from people so feel free.</p>
        </div>
      </div>
      <div id="ways">
        <h3 class="fontface">Contact Form</h3>
        <div id="ways_info">
          <form action="send.php" method="post" class="contactForm" id="form">
            <div class="holder"> </div>
            <!--END holder-->
            <div class="holder">
              <div>
                <label>Name<em>*</em></label>
                <input type="text" class="requiredField" name="name">
              </div>
              <div>
                <label>Email <em>*</em></label>
                <input type="text" class="requiredField email" name="email">
              </div>
            </div>
            <!--END holder-->
            <div class="holder">
              <div>
                <label>Message</label>
                <textarea cols="60" rows="6" name="message"></textarea>
              </div>
              <div>
                <input type="submit" title="Please make sure you filled out all required fields." class="submit toolTip" value="Submit">
              </div>
            </div>
            <!--END holder-->
          </form>
          <!--END ID form -->
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

You could try this:

$("#youdiv").addClass('in').attr('aria-expanded', 'true');

Answer 3

Use the active argument

$( "#myAcc" ).accordion({
   active: $(".defaultOpen")
});

Answer 4

$('.desc').not(':first').hide();

Should hide all but the first desc div. Also, add the .current class to your first div.

This is assuming it's the first div you want to open.

Answer 5

You can use the activate method of the plugin. See the API documentation for more information.

Something like:

$( "#accordion" ).accordion( "activate" , 0)

(if your tab "About Me" is the first one)

[EDIT]
Here is a working jsfiddle: http://jsfiddle.net/cA6bK/

You can trigger this API whenever you want (onload, onchange or whatever)

Answer 6

This WILL do the job...

$("html body div#wrap div#main div#accordian_wrap div#container h3.open-close a span").trigger('click');

But you may want to look in to identifying the clickable object more precisely....this may change on edit of page.

Just see if you can set an id or so on the span/a tag, so it can become:

$("#firstItemOpen").trigger('click');