Solved

Collapsible Text Box jquery Mod Where First Div Header Always Shows

Posted on 2014-10-01
14
286 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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 

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
 

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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Can anyone please tell me why i can not find ID  investorCoolGrid inside the jsp page? 1 22
Jquery 2 23
IFrame in MVC 2 23
Ahax pagination 9 32
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…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

840 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