Back To Website Design Forum

jquery slideToggle() help!

  • khanvict
  • Born
  • Born
  • No Avatar
  • Joined: Mar 01, 2011
  • Posts: 4
  • Status: Offline

Post March 12th, 2011, 8:50 am

post edit again
I solved my main issue which was toggling individual posts on my wordpress blog but I still have 2 lingering issues:

1 - the toggle will not slide the block/background element where these posts are contained but will push down the other elements below.

googling this issue I came across someone else encountering something similar but the solution is not explained in detail. something about float and clear issue is mentioned.

the url for reference: stackoverflow(dot)com/questions/2586176/jquery-toggle-pushing-other-elements-around-bullies

2- the toggle effect itself kind of has a stutter or hesitation which I don't think is normal?

Can someone please look at my CSS and possibly tell me what could fix these issues?

Here is what I have:

HTML:
Code: [ Select ]
<html>
<body>

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


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

</body>
</html>
  1. <html>
  2. <body>
  4. <div class="cCRight">
  5. <a class="moreless" href="#"> More / Less</a>
  6. </div>
  9. <div class="expand">
  10. <?php the_content(); ?>
  11. </div>
  13. </body>
  14. </html>


SCRIPT:
Code: [ Select ]
<script>

$(document).ready(function() {

 $('.expand').hide();

 $('a.moreless').click(function() {
  $(this).closest('.post').find('.expand').toggle(400);
  return false;
 });
});

</script>
  1. <script>
  3. $(document).ready(function() {
  5.  $('.expand').hide();
  7.  $('a.moreless').click(function() {
  8.   $(this).closest('.post').find('.expand').toggle(400);
  9.   return false;
  10.  });
  11. });
  13. </script>


CSS:
Code: [ Select ]
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;
}
.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;
}
  1. html, body {
  2.     height: 100%;
  3.     width: 100%;
  4. }
  5. body {
  6.     font-family: Arial, Helvetica, sans-serif;
  7.     font-size:11px;
  8.     color:#000000;
  9.     background: #FFFFFF;
  10.     line-height:1.5;
  11.     text-align:center;
  12. }
  13. h1 {
  14.     background-color:#FFFFFF;
  15.     font-size:48px;
  16.     font-weight:bold;
  17.     text-transform:uppercase;
  18.     letter-spacing:-5px;
  19.     line-height:75%;
  20.     padding:0px 10px 0px 0px;
  21.     float:left;
  22.     background-color:#FFFFFF;
  23. }
  24. h2 {
  25.     /*height: 71px;*/
  26.     font-size:42px;
  27.     font-weight:bold;
  28.     text-transform:uppercase;
  29.     letter-spacing:-5px;
  30.     line-height:85%;
  31.     color:#000000;
  32.     margin:0px;
  33.     padding:0px 0px 0px 1px;
  34.     background-color:#FFFFFF;
  35. }
  36. h3 {
  37.     font-size:24px;
  38.     font-weight:bold;
  39.     text-transform:uppercase;
  40.     letter-spacing:-2px;
  41.     padding:20px 0px 10px 0px;
  42. }
  43. h1 a:link {
  44.     text-decoration:none;
  45.     color:#000000;
  46. }
  47. h1 a:visited {
  48.     text-decoration:none;
  49.     color:#000000;
  50. }
  51. h1 a:hover {
  52.     text-decoration:none;
  53.     color:#000000;
  54. }
  55. #wrapper {
  56.     width:960px;
  57.     height:100%;
  58.     margin: 0 auto;
  59.     text-align:left;
  60. }
  61. #barCode {
  62.     width: 960px;
  63.     height: 10px;
  64.     text-align:right;
  65.     margin:1px 0px 0px 0px;
  66.     padding:14px 0px 0px 0px;
  67. }
  68. #tagLine {
  69.     font-size:12px;
  70.     text-indent:5px;
  71.     letter-spacing:10px;
  72.     clear:both;
  73. }
  74. #menuWrapper {
  75.     background-color:#000000;
  76.     width: 940px;
  77.     height:35px;
  78.     padding:0px 20px 0px 0px;
  79. }
  80. .menu {
  81.     font-size:10px;
  82.     font-weight:bold;
  83.     text-transform:uppercase;
  84.     text-align:right;
  85.     letter-spacing:0px;
  86.     line-height:90%;
  87.     color:#FFFFFF;
  88.     margin:4px 0px 0px 0px;
  89.     float:right;
  90. }
  91. .menu ul {
  92.     list-style:none;
  93. }
  94. .menu ul li {
  95.     display: block;
  96. }
  97. .menu a:link {
  98.     text-decoration:none;
  99.     color:#FFFFFF;
  100. }
  101. .menu a:visited {
  102.     text-decoration:none;
  103.     color:#FFFFFF;
  104. }
  105. .menu a:hover {
  106.     text-decoration:none;
  107.     color:#FFFFFF;
  108. }
  109. .menuSpacer {
  110.     width:1px;
  111.     height:25px;
  112.     margin:5px 20px 0px 20px;
  113.     background-image:url(images/menuSpacer.jpg);
  114.     float:right;
  115. }
  116. .mainCategory {
  117.     font-size:10px;
  118.     font-weight:bold;
  119.     text-transform:uppercase;
  120.     text-align:left;
  121.     line-height: 90%;
  122.     letter-spacing:0px;
  123.     color:#FFFFFF;
  124.     width: 940px;
  125.     height:27px;
  126.     background-color:#000000;
  127.     margin:20px 0px 0px 0px;
  128.     padding:8px 0px 0px 20px;
  129.     clear:both;
  130. }
  131. .maxMin {
  132.     background:url(images/maxMinBtn.jpg) top right no-repeat;
  133.     width: 10px;
  134.     height: 10px;
  135.     display: block;
  136.     position:relative;
  137.     left:910px;
  138.     top:-19px;
  139. }
  140. .active {
  141.     background-position: bottom;
  142. }
  143. .toggleMainCategory {
  144.     background-color:#000000;
  145.     width:960px;
  146.     color:#FFFFFF;
  147. }
  148. .postWrapper {
  149.     width:840px;
  150.     padding:90px 60px 20px 60px;
  151. }
  152. .post {
  153.     background-color:#000000;
  154.     height:72px;
  155. }
  156. .postTitleBar {
  157.     width:839px;
  158.     height:10px;
  159.     padding:0px 0px 0px 1px;
  160.     background-color:#FFFFFF;
  161.     font-size:8px;
  162.     text-transform: uppercase;
  163.     font-weight:bold;
  164.     letter-spacing:0.2px;
  165.     letter-spacing:0px;
  166.     line-height:130%;
  167.     color:#000000;
  168.     clear:both;
  169. }
  170. .post h2 {
  171.     font-size:30px;
  172.     height:36px;
  173.     font-weight:bold;
  174.     text-transform:uppercase;
  175.     letter-spacing:-3px;
  176.     line-height:85%;
  177.     color:#FFFFFF;
  178.     margin:0px 0px 0px -2px;
  179.     background-color:#000000;
  180.     float:left;
  181.     position: relative;
  182.     z-index: 1;
  183. }
  184. .cCLeft {
  185.     margin:5px 0px 0px 0px;
  186.     float:left;
  187.     clear:left;
  188.     position: relative;
  189.     z-index: 1;
  190. ;
  191. }
  192. .cCMiddle {
  193.     margin:18px 5px 5px 10px;
  194.     font-size:9px;
  195.     font-weight:normal;
  196.     float:left;
  197.     position: relative;
  198.     z-index: 1;
  199. }
  200. .cCRight {
  201.     font-size:9px;
  202.     padding:18px 0px 0px 0px;
  203.     float:right;
  204.     position: relative;
  205.     z-index: 1;
  206. }
  207. .expand {
  208.     width: 839px;
  209.     font-size:9px;
  210.     padding:18px 0px 0px 0px;
  211.     float:left;
  212.     clear:left;
  213.     position: relative;
  214.     z-index: 2;
  215. }
  216. .singlePageBg {
  217.     width:840px;
  218.     background-color:#000000;
  219.     color:#FFFFFF;
  220.     padding:90px 60px 60px 60px;
  221.     overflow:auto;
  222. }
  223. .anfang {
  224.     color: #FFFFFF;
  225.     display: inline;
  226.     float: left;
  227.     font-size: 35px;
  228.     line-height: 10px;
  229.     margin: 11px 5px 0px 0px;
  230.     text-transform: uppercase;
  231. }
  232. .singleText {
  233.     font-weight:normal;
  234.     margin:20px 0px 40px 0px;
  235. }
  236. .gallery img {
  237.     margin:0px;
  238.     padding:0px;
  239.     border: 0px;
  240.     background-color:#FFFFFF;
  241.     cursor:default;
  242. }
  243. .gallery-icon {
  244.     margin:0px;
  245.     padding:0px;
  246. }
  247. .gallery-item {
  248.     margin:0px;
  249.     padding:0px;
  250.     text-align:center;
  251. }
  252. .gallery {
  253.     margin: 0px;
  254.     padding:0px;
  255. }
  256. .video {
  257.     text-align:center;
  258. }
  259. .share {
  260.     text-align:right;
  261.     font-size:8px;
  262.     letter-spacing:0.2px;
  263.     text-transform:uppercase;
  264.     margin:20px 0px 0px 0px;
  265. }
  266. .aboutHolder {
  267.     width:900px;
  268.     padding:70px 0px 40px 60px;
  269. }
  270. .about {
  271.     width:360px;
  272.     font-weight:normal;
  273.     color:#FFFFFF;
  274.     background-color:#000000;
  275.     margin:0px 0px 20px 0px;
  276. }
  277. .about h2 {
  278.     width:838px;
  279.     height:26px;
  280.     font-size:30px;
  281.     text-transform:uppercase;
  282.     font-weight:bold;
  283.     letter-spacing:-4px;
  284.     line-height:90%;
  285.     margin:0px;
  286.     padding:0px;
  287.     background-color:#FFFFFF;
  288.     color:#000000;
  289. }
  290. .contactHolder {
  291.     width:900px;
  292.     padding:70px 0px 40px 60px;
  293. }
  294. .contact {
  295.     font-size:30px;
  296.     font-weight:bold;
  297.     text-transform:uppercase;
  298.     letter-spacing:-2px;
  299.     line-height:85%;
  300.     color:#FFFFFF;
  301.     background-color:#000000;
  302. }
  303. .contact h2 {
  304.     width:838px;
  305.     height:10px;
  306.     font-size:8px;
  307.     text-transform: uppercase;
  308.     font-weight:bold;
  309.     letter-spacing:0.2px;
  310.     letter-spacing:0px;
  311.     line-height:130%;
  312.     margin:0px 0px -25px 0px;
  313.     padding:0px 0px 0px 1px;
  314.     background-color:#FFFFFF;
  315.     color:#000000;
  316. }
  317. .smallerFontSize {
  318.     text-transform:uppercase;
  319.     font-size: 8px;
  320.     letter-spacing:0.2px;
  321. }
  322. .description {
  323.     text-transform:uppercase;
  324.     font-size: 8px;
  325.     letter-spacing:0.2px;
  326. }
  327. .description p {
  328.     margin:0px;
  329.     padding:0px;
  330. }
  331. .fontColorWhite {
  332.     color:#FFFFFF;
  333. }
  334. .fontColorBlack {
  335.     color:#000000;
  336. }
  337. a:link {
  338.     text-decoration:none;
  339.     color:#FFFFFF;
  340. }
  341. a:visited {
  342.     text-decoration:none;
  343.     color:#FFFFFF;
  344. }
  345. a:hover {
  346.     text-decoration:none;
  347.     color:#FFFFFF;
  348. }
  349. #footerTypoSmall {
  350.     font-size:12px;
  351.     letter-spacing:10px;
  352.     text-align:right;
  353.     text-transform:lowercase;
  354.     margin:0px 5px 0px 0px;
  355.     clear:both;
  356. }
  357. #footerTypo {
  358.     background-color:#FFFFFF;
  359.     font-size:48px;
  360.     font-weight:bold;
  361.     color:#000000;
  362.     text-transform:uppercase;
  363.     letter-spacing:-5px;
  364.     line-height:100%;
  365.     padding:0px 0px 0px 5px;
  366.     margin:0px 0px -14px 0px;
  367.     position:relative;
  368.     top:-10px;
  369.     float:right;
  370. }
  371. .footerLink {
  372.     color:#FFFFFF;
  373.     background-color:inherit;
  374.     font-size:8px;
  375.     text-decoration:none;
  376. }
  377. #footer {
  378.     text-transform:uppercase;
  379.     font-size:8px;
  380.     line-height:100%;
  381.     color:#FFFFFF;
  382.     width: 940px;
  383.     height:30px;
  384.     background-color:#000000;
  385.     margin:20px 0px 0px 0px;
  386.     padding:5px 0px 0px 20px;
  387.     clear:left;
  388. }
  389. #bottomSpacer {
  390.     width: 960px;
  391.     height:105px;
  392.     background-color:#FFFFFF;
  393. }
  394. #wrapperComment {
  395.     width: 320px;
  396.     margin: 0 auto;
  397.     padding:0px 0px 30px 0px;
  398.     text-align:left;
  399. }
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 12th, 2011, 8:50 am

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 13th, 2011, 10:05 am

If you do not mind could you please post the URL to this. Your account at Ozzu now has permission to post URLs. I tried to re-duplicate it based on what you have given me, but I think I need your entire web page which you did not give me. Once I look at your site I may be able to see what is going on better.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • khanvict
  • Born
  • Born
  • No Avatar
  • Joined: Mar 01, 2011
  • Posts: 4
  • Status: Offline

Post March 13th, 2011, 10:11 am

I appreciate your help but I was able to resolve all the issues I was having yesterday. I added float+clear properties to the post wrapper which fixed the first problem and then moved the <script> </script> tags to the header which took care of the other glitch.

simple enough in hindsight but very stressful trying to troubleshoot it down.

=)
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 13th, 2011, 10:14 am

Glad you were able to resolve everything, and thanks for letting us know your resolution :)
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • khanvict
  • Born
  • Born
  • No Avatar
  • Joined: Mar 01, 2011
  • Posts: 4
  • Status: Offline

Post March 13th, 2011, 12:46 pm

I have a flaw in my resolution.

I mentioned that I had an issue previously where the toggle would not slide the block/background element where these posts are contained but will push down the other elements below.

I thought I did have the issue resolved but apparently it will still not slide the background down for only the earliest post in my category. It will for every other one. I didn't realize this previously cause I only put one line of dummy content which just happened to still fit within the margins of the background.

post edit: resolved

Added the following to postwrapper div to fix the issue mentioned above:

Code: [ Select ]
<br style='clear: left;' />
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 13th, 2011, 4:40 pm

Looks like when I finally find time to look into this, you already resolved it! Thanks again for posting how you fixed it, looks like an easy fix.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 87 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.