Search code examples
jquerycsstoggleslide

jquery toggle - repetitive double toggle effect + not staying open

I have my wordpress post content hidden using a jquery toggle effect. The problem is when the content is toggled, jquery will act as if it is doing the effect 2x and then won't stay open (it is hidden by default which is what i want, then when i toggle it will open, shut, open, shut).

Why is the action repetitive like that and how can I make it stay open? Does it have anything to do with the css clear or float properties?

here is the html for the specific portion and the css for the entire page:

HTML

     <div class="postWrapper">
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="post">
      <div class="postTitleBar">title</div>
      <div class="cCLeft">
        <h2 class="post">
          <?php the_title(); ?>
        </h2>
      </div>
      <div class="cCMiddle"> added
        <?php the_time('F jS Y') ?>
        |
        <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?>
      </div>

<script>

$(document).ready(function() {

 // hides the slickbox as soon as the DOM is ready
  $('.expand').hide();
 // toggles the slickbox on clicking the noted link  
  $('a.moreless').click(function() {
    $(this).closest('.post').find('.expand').toggle(400);
    return false;
  });
});

</script>

<div class="cCRight">
<a class="moreless" href="#"> More / Less</a>
</div>


<div class="expand">
<?php the_content(); ?>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000000;
    background: #FFFFFF;
    line-height:1.5;
    text-align:center;
}
h1 {
    background-color:#FFFFFF;
    font-size:48px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-5px;
    line-height:75%;
    padding:0px 10px 0px 0px;
    float:left;
    background-color:#FFFFFF;
}
h2 {
    /*height: 71px;*/
    font-size:42px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-5px;
    line-height:85%;
    color:#000000;
    margin:0px;
    padding:0px 0px 0px 1px;
    background-color:#FFFFFF;
}
h3 {
    font-size:24px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-2px;
    padding:20px 0px 10px 0px;
}
h1 a:link {
    text-decoration:none;
    color:#000000;
}
h1 a:visited {
    text-decoration:none;
    color:#000000;
}
h1 a:hover {
    text-decoration:none;
    color:#000000;
}
#wrapper {
    width:960px;
    height:100%;
    margin: 0 auto;
    text-align:left;
}
#barCode {
    width: 960px;
    height: 10px;
    text-align:right;
    margin:1px 0px 0px 0px;
    padding:14px 0px 0px 0px;
}
#tagLine {
    font-size:12px;
    text-indent:5px;
    letter-spacing:10px;
    clear:both;
}
#menuWrapper {
    background-color:#000000;
    width: 940px;
    height:35px;
    padding:0px 20px 0px 0px;
}
.menu {
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
    text-align:right;
    letter-spacing:0px;
    line-height:90%;
    color:#FFFFFF;
    margin:4px 0px 0px 0px;
    float:right;
}
.menu ul {
    list-style:none;
}
.menu ul li {
    display: block;
}
.menu a:link {
    text-decoration:none;
    color:#FFFFFF;
}
.menu a:visited {
    text-decoration:none;
    color:#FFFFFF;
}
.menu a:hover {
    text-decoration:none;
    color:#FFFFFF;
}
.menuSpacer {
    width:1px;
    height:25px;
    margin:5px 20px 0px 20px;
    background-image:url(images/menuSpacer.jpg);
    float:right;
}
.mainCategory {
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
    text-align:left;
    line-height: 90%;
    letter-spacing:0px;
    color:#FFFFFF;
    width: 940px;
    height:27px;
    background-color:#000000;
    margin:20px 0px 0px 0px;
    padding:8px 0px 0px 20px;
        clear:both;
}
.maxMin {
    background:url(images/maxMinBtn.jpg) top right no-repeat;
    width: 10px;
    height: 10px;
    display: block;
    position:relative;
    left:910px;
    top:-19px;
}
.active {
    background-position: bottom;
}
.toggleMainCategory {
    background-color:#000000;
    width:960px;
    color:#FFFFFF;
}
.postWrapper {
    width:840px;
    padding:90px 60px 20px 60px;

}
.post {
    background-color:#000000;
    height:72px;
        clear:both;
}
.postTitleBar {
    width:839px;
    height:10px;
    padding:0px 0px 0px 1px;
    background-color:#FFFFFF;
    font-size:8px;
    text-transform: uppercase;
    font-weight:bold;
    letter-spacing:0.2px;
    letter-spacing:0px;
    line-height:130%;
    color:#000000;
    clear:both;
}
.post h2 {
    font-size:30px;
    height:36px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-3px;
    line-height:85%;
    color:#FFFFFF;
    margin:0px 0px 0px -2px;
    background-color:#000000;
    float:left;
        position: relative;
        z-index: 1;
}
.cCLeft {
    margin:5px 0px 0px 0px;
    float:left;
    clear:left;
        position: relative;
        z-index: 1;
;
}
.cCMiddle {
    margin:18px 5px 5px 10px;
    font-size:9px;
    font-weight:normal;
    float:left;
        position: relative;
        z-index: 1;
}
.cCRight {
    font-size:9px;
    padding:18px 0px 0px 0px;
    float:right;
        position: relative;
        z-index: 1;
}
.expand {
        width: 839px;
    font-size:9px;
    padding:18px 0px 0px 0px;
        float:left;
        clear: left;
        position: relative;
        z-index: 2;
}
.singlePageBg {
    width:840px;
    background-color:#000000;
    color:#FFFFFF;
    padding:90px 60px 60px 60px;
    overflow:auto;
}
.anfang {
    color: #FFFFFF;
    display: inline;
    float: left;
    font-size: 35px;
    line-height: 10px;
    margin: 11px 5px 0px 0px;
    text-transform: uppercase;
}
.singleText {
    font-weight:normal;
    margin:20px 0px 40px 0px;
}
.gallery img {
    margin:0px;
    padding:0px;
    border: 0px;
    background-color:#FFFFFF;
    cursor:default; 
}
.gallery-icon {
    margin:0px;
    padding:0px;
}
.gallery-item {
    margin:0px;
    padding:0px;
    text-align:center;
}
.gallery {
    margin: 0px;
    padding:0px;
}
.video {
    text-align:center;
}
.share {
    text-align:right;
    font-size:8px;
    letter-spacing:0.2px;
    text-transform:uppercase;
    margin:20px 0px 0px 0px;
}
.aboutHolder {
    width:900px;
    padding:70px 0px 40px 60px;
}
.about {
    width:360px;
    font-weight:normal;
    color:#FFFFFF;
    background-color:#000000;
    margin:0px 0px 20px 0px;
}
.about h2 {
    width:838px;
    height:26px;
    font-size:30px;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:-4px;
    line-height:90%;
    margin:0px;
    padding:0px;
    background-color:#FFFFFF;
    color:#000000;
}
.contactHolder {
    width:900px;
    padding:70px 0px 40px 60px;
}
.contact {
    font-size:30px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-2px;
    line-height:85%;
    color:#FFFFFF;
    background-color:#000000;
}
.contact h2 {
    width:838px;
    height:10px;
    font-size:8px;
    text-transform: uppercase;
    font-weight:bold;
    letter-spacing:0.2px;
    letter-spacing:0px;
    line-height:130%;
    margin:0px 0px -25px 0px;
    padding:0px 0px 0px 1px;
    background-color:#FFFFFF;
    color:#000000;
}
.smallerFontSize {
    text-transform:uppercase;
    font-size: 8px;
    letter-spacing:0.2px;
}
.description {
    text-transform:uppercase;
    font-size: 8px;
    letter-spacing:0.2px;
}
.description p {
    margin:0px;
    padding:0px;
}
.fontColorWhite {
    color:#FFFFFF;
}
.fontColorBlack {
    color:#000000;
}
a:link {
    text-decoration:none;
    color:#FFFFFF;
}
a:visited {
    text-decoration:none;
    color:#FFFFFF;
}
a:hover {
    text-decoration:none;
    color:#FFFFFF;
}
#footerTypoSmall {
    font-size:12px;
    letter-spacing:10px;
    text-align:right;
    text-transform:lowercase;
    margin:0px 5px 0px 0px;
    clear:both;
}
#footerTypo {
    background-color:#FFFFFF;
    font-size:48px;
    font-weight:bold;
    color:#000000;
    text-transform:uppercase;
    letter-spacing:-5px;
    line-height:100%;
    padding:0px 0px 0px 5px;
    margin:0px 0px -14px 0px;
    position:relative;
    top:-10px;
    float:right;
}
.footerLink {
    color:#FFFFFF;
    background-color:inherit;
    font-size:8px;
    text-decoration:none;
}
#footer {
    text-transform:uppercase;
    font-size:8px;
    line-height:100%;
    color:#FFFFFF;
    width: 940px;
    height:30px;
    background-color:#000000;
    margin:20px 0px 0px 0px;
    padding:5px 0px 0px 20px;
    clear:left;
}
#bottomSpacer {
    width: 960px;
    height:105px;
    background-color:#FFFFFF;
}
#wrapperComment {
    width: 320px;
    margin: 0 auto;
    padding:0px 0px 30px 0px;
    text-align:left;
}
Solution

  • your html is incorrect in your question. you are duplicating the same

    $(document).ready(function(){ ... your code here ... })

    multiple times through your document. that will produce fairly erratic behavior on different browsers.

       <div class="post">
          <div class="postTitleBar">title</div>
          <div class="cCLeft">
            <h2 class="post">
              004        </h2>
          </div>
          <div class="cCMiddle"> added
            March 12th 2011        |
            <a href="http://onefourteen.org/?p=347#respond" title="Comment on 004">0 Comments</a>      </div>

    <script>

    $(document).ready(function() {

     // toggles the slickbox on clicking the noted link  
      $('a.moreless').click(function() {
        $(this).closest('.post').find('.expand').toggle(400);
        return false;
      });
    });

    </script>

    <div class="cCRight">
    <a class="moreless" href="#"> More / Less</a>
    </div>
    <div class="post">
          <div class="postTitleBar">title</div>
          <div class="cCLeft">
            <h2 class="post">
              002        </h2>
          </div>
          <div class="cCMiddle"> added
            March 12th 2011        |
            <a href="http://onefourteen.org/?p=341#respond" title="Comment on 002">0 Comments</a>      </div>

    <script>

    $(document).ready(function() {

     // toggles the slickbox on clicking the noted link  
      $('a.moreless').click(function() {
        $(this).closest('.post').find('.expand').toggle(400);
        return false;
      });
    });

    </script>

    <div class="cCRight">
    <a class="moreless" href="#"> More / Less</a>
    </div>


    <div class="expand">
    <p>test</p>
    </div>




        </div>


<div class="expand">
<p>testing</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>2134</p>
<p>234</p>
<p>&nbsp;</p>
<p>234</p>
</div>




    </div>

    old solution

    change the css .expand class by adding { display:none} and ditch the $(".expand").hide() on document ready. At the least, it is a faster load for the page and the hide() animation on page load can appear jerky on some machines. I have seen .hide() and .toggle() fight a bit before, but could never lock down what was causing it. (older page with ancient JS on it) I got rid of it, through sheer luck, by only using .toggle() on the page. I shied away from more detective work due to time constraints.