Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 294
  • Last Modified:

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>
0
eossma
Asked:
eossma
  • 7
  • 7
1 Solution
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
eossmaAuthor Commented:
THANK YOU!!!!!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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