Solved

Collapsible Text Box jquery Mod Where First Div Header Always Shows

Posted on 2014-10-01
14
287 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
Technology Partners: 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!

 

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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript Loan Calculator Error 3 35
Provide the IDEA of External JS 1 39
Ajax on ASP 2 41
how to use jquery variable in mysql query 20 41
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

726 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