Collapsible Text Box jquery Mod Where First Div Header Always Shows

I am a newbie to this.  How can I quicken this code and make the first Div Header (+ Get Help) to always show?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                <html xmlns="http://www.w3.org/1999/xhtml">
                                <head>
                                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                                <title>Collapsible Message Panel</title>                          
                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>                                
<script type="text/javascript">
$(document).ready(function(){
 //hide the all of the element with class msg_body
 $(".msg_body").hide();
 //toggle the componenet with class msg_body
 $(".msg_head").click(function(){
  $(this).next(".msg_body").slideToggle(600);
 });
});
</script>
           
                                <style type="text/css">
body {
 margin: 10px auto;
 width: 100%;
 font: 85%/120% Trebuchet, Verdana, Arial, Helvetica, Serif;
}
p {
 padding: 0 0 1em;
}
.msg_list {
 margin: 0px;
 padding: 0px;
 width: 245px;
}
.msg_head {
 padding: 5px 10px;
 cursor: pointer;
 position: relative;
 background-color:#acacac;
 margin:1px;
}
.msg_body {
 padding: 5px 10px 15px;
 background-color:#ececec;
}
</style>                                
</head>                                
                                <body>
                                <div align="center"></div>                                
                                <div class="msg_list">
                                  <p class="msg_head">+ GET HELP</p>                                
                                  <div class="msg_body">
                                    - <a href="https://sites.google.com/a/state.co.us/cco/conectwithus/it-directors">For OIT customers and staff</a><br /><br />
                                    - <a href="http://core.state.co.us/home">Use the State's financial system<br />&nbsp;&nbsp;(CORE)</a><br /><br />
                                    - <a href="https://sites.google.com/a/state.co.us/cco/conectwithus/cco_report">CCO monthly &#38; quarterly reports</a>
  </div>                                

 
                                  <p class="msg_head">+ TWITTER</p>                                
                                  <div class="msg_body">
                     Follow us on Twitter ... <a href="https://twitter.com/OITColorado">@OITColorado</a>
  </div>                                
 

                                  <p class="msg_head">+ FACEBOOK</p>                                
                                  <div class="msg_body">
                     <a href="https://www.facebook.com/ColoradoGovernorsOfficeOfInformationTechnology">OIT is on Facebook!</a> A forum with the latest news and trends for OIT news.
  </div>                                
 

                                  <p class="msg_head">+ LINKEDIN</p>                                
                                  <div class="msg_body">
                     <a href="http://www.linkedin.com/company/state-of-colorado-governor%27s-office-of-information-technology?trk=tyah&trkInfo=tarId%3A1402511165439%2Ctas%3Agovernor%27s+office+of+info%2Cidx%3A1-1-1">Join LinkedIn</a> the latest news and trends for Colorado IT professionals.
  </div>                                

 
</div>                                
</body>                                
</html>
eossmaAsked:
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.

GaryCommented:
Change your jQuery to

$(document).ready(function () {
    //hide the all of the element with class msg_body
    $(".msg_body:not(:first-of-type)").hide();
    //toggle the componenet with class msg_body
    $(".msg_head").click(function () {
        $(this).next(".msg_body").slideToggle(600);
    });
});

Open in new window


Though there is no reason to use jQuery to hide them when you could just use CSS
.msg_body:not(:first-of-type) {
     display:none;
}

Open in new window

0
eossmaAuthor Commented:
This has expanded all of them and the toggle no longer works.
0
GaryCommented:
Just use the CSS I gave above and remove the other lines so you end up with
$(document).ready(function () {
    //toggle the componenet with class msg_body
    $(".msg_head").click(function () {
        $(this).next(".msg_body").slideToggle(600);
    });
});

Open in new window

0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

eossmaAuthor Commented:
.msg_body:not(:first-of-type) {
     display:none;
}

The colon before first-of-type is causing an error:
Expected <Identifier> not :
0
GaryCommented:
Then whatever program you are using is only checking CSS2 and does not have CSS3 support.

Your code.
http://jsfiddle.net/9hq284y2/4/

Or using jQuery
$(document).ready(function () {
    $(".msg_body:not(:first-of-type)").hide()
    $(".msg_head").click(function () {
        $(this).next(".msg_body").slideToggle(600);
    });
});

Open in new window

0
eossmaAuthor Commented:
Yes, I have to use the Google Sites HTML text box tool unfortunately.

So, this last code still expands all of Divs and the toggle no longer works.

Do I need to change the <div class="msg_body"> on the first div?
0
GaryCommented:
I gave the jquery alternative above.
What version of jquery are you using?
0
eossmaAuthor Commented:
I have to use 1.5 for Google Sites is the issue.
0
GaryCommented:
Well the CSS version will work in all browsers bar IE8 - even though it's giving it as an error in Google Sites it will still work
And the jquery with that version works as well.

Do you have a link to the site?
0
eossmaAuthor Commented:
0
GaryCommented:
Lets forget jQuery and just use plain JS (for the hiding bit, leave your click function as it is)

var els = document.getElementsByClassName('msg_body');
for (var i = 1; i < els.length; ++i) {
    var msg_body = els[i];  
    msg_body.style.display = 'none';
}

Open in new window

0
eossmaAuthor Commented:
So?  Because this collapse everything again.

<script type="text/javascript">
$(document).ready(function(){
 //hide the all of the element with class msg_body
 $(".msg_body").hide();
 //toggle the componenet with class msg_body
 $(".msg_head").click(function(){
  $(this).next(".msg_body").slideToggle(600);
 });
});
var els = document.getElementsByClassName('msg_body');
for (var i = 1; i < els.length; ++i) {
    var msg_body = els[i];  
    msg_body.style.display = 'none';
}  
</script>

Open in new window

0
GaryCommented:
Comment out this
$(".msg_body").hide();

And put the new script inside the doc ready function

<script type="text/javascript">
$(document).ready(function(){
var els = document.getElementsByClassName('msg_body');
for (var i = 1; i < els.length; ++i) {
    var msg_body = els[i];  
    msg_body.style.display = 'none';
} 
 //toggle the componenet with class msg_body
 $(".msg_head").click(function(){
  $(this).next(".msg_body").slideToggle(600);
 });
});
 
</script>

Open in new window

0

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
eossmaAuthor 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
Web Languages and Standards

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.