Solved

Collapsible Text Box jquery Mod Where First Div Header Always Shows

Posted on 2014-10-01
14
282 Views
Last Modified: 2014-10-02
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
Comment
Question by:eossma
  • 7
  • 7
14 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40355155
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
 

Author Comment

by:eossma
ID: 40355248
This has expanded all of them and the toggle no longer works.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40355257
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
 

Author Comment

by:eossma
ID: 40355272
.msg_body:not(:first-of-type) {
     display:none;
}

The colon before first-of-type is causing an error:
Expected <Identifier> not :
0
 
LVL 58

Expert Comment

by:Gary
ID: 40355278
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
 

Author Comment

by:eossma
ID: 40355486
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
 
LVL 58

Expert Comment

by:Gary
ID: 40355508
I gave the jquery alternative above.
What version of jquery are you using?
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:eossma
ID: 40355570
I have to use 1.5 for Google Sites is the issue.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40355588
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
 

Author Comment

by:eossma
ID: 40355600
0
 
LVL 58

Expert Comment

by:Gary
ID: 40355638
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
 

Author Comment

by:eossma
ID: 40355718
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40355761
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
 

Author Closing Comment

by:eossma
ID: 40357309
THANK YOU!!!!!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now