0

I've read all of the previous answers on this site with the Jquery toggle, but I'm not seeing the solution for mine. Appreciate someone's eyes on this. All that we need here is for is for copy to appear on demand when the #pulldown_tab is selected. Despite looking very hard at the w3 Jquery site and side testing I'm lost as to what's wrong.


<html>
<head>
<script> 
$(document).ready(function(){
$("section_content_wrapper""pulldown_tab").click(function(){
$("section_content_wrapper" "cream_of_the_craft").slideToggle("slow");
  });
});
</script>


<div id="main"><!-- Start Main Area -->
<div class="navigation_container"><!-- navigation -->
<ul class="menu">
        <li><a href="#">About</a></li>          
        <li><a href="#">Articles</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
</ul>
</div><!-- END navigation --> 

<div class="pppd_logo">
</div><!-- END logo -->

<div class="section_content_wrapper"><!-- Start Section 1 Cream_of_the_Craft -->
<h1>This is the Headline</h1>
    <div id="pulldown_tab"></div>
    <div id="cream_of_the_craft"> <!--section content-->
    This is the copy to revealed.</div><!--section content-->
        </div><!-- END Section 1 Cream_of_the_Craft -->
</div><!-- End Main Area -->


.section_content_wrapper
{
position:       absolute;
width:          46%;
height:         200px;
margin-top:     15%;
margin-right:   auto;
margin-left:    39%;
z-index:        0;
}

h1
{
position:   relative;
margin-bottom:  .8em;
font-family: 'EB Garamond', serif;
font-weight:    400;
font-size:  2em;
padding-left:   0.1em;
padding-right:  0.1em;
padding-bottom: 0;
color:  black;
text-align: center;
border-bottom-style:solid;
border-width:   1px;
border-color:   black;
z-index:    0;
}

#cream_of_the_craft
{
position:       absolute;
margin-top:     -25px;
padding-top:    4em;
padding-left:   1em;
padding-right:  1em;
padding-bottom: 1em;
font-family:    'Istok Web', sans-serif;
font-size:      1em;
color:          black;
background-color: #FFFFFF;
opacity:    .5;
z-index:    0;
display: none;
}


#pulldown_tab
{
position:       absolute;
height:48px;
width: 34px;
background:     url('pulldown.png');
margin-top:     -25px;
margin-right:   auto;
margin-left:    17em;
z-index:        2;
}
1
  • 1
    Completely unrelated, but if you're going out of your way to give divs a "section_*" identifier, why don't you just use HTML5's <section> ? Jun 3, 2013 at 5:08

5 Answers 5

3

You are using jQuery selectors the wrong way, here is how it should be.

$(document).ready(function(){
  $(".section_content_wrapper > #pulldown_tab").click(function(){
    $(".section_content_wrapper > #cream_of_the_craft").slideToggle("slow");
  });
});

I suggest you to read the introduction to jQuery: http://learn.jquery.com/

1
  • 1
    You missed a dot . $("section_content_wrapper
    – PSL
    Jun 3, 2013 at 5:08
2

I tested this and its working. The code snippet is as follow:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script> 

  $(document).ready(function(){
        $(".section_content_wrapper,#pulldown_tab").click(function(){
        $(".section_content_wrapper,#cream_of_the_craft").fadeToggle("slow");
          });
    });
  </script>

Use comma between selectors and use fadetoggle().

1

Your selectors are wrong. They should be:

$(document).ready(function(){
    $(".section_content_wrapper #pulldown_tab").click(function(){
        $(".section_content_wrapper #cream_of_the_craft").slideToggle("slow");
    });
});

// .something equals class="something"
// #something equals id="something"

Other cooler selectors are also available here

1
  • It was the first one that showed up on google and at a glanced provided a very nice table of selector syntax. TBH, the jQuery's main docs aren't really the friendliest anyway. Compare the table on the original post with this from the docs: api.jquery.com/category/selectors
    – JRomero
    Jun 3, 2013 at 5:21
1

A couple of things.

  1. The #pulldown_tab contains no content, so you have nothing to click on.

  2. Your selectors are broken. As pulldown_tab and cream_of_the_craft both have id's you can refer to them directly as $("#pulldown_tab") and $(#cream_of_the_craft) respectively.

See the following jsfiddle for a working example of what you want: http://jsfiddle.net/aB5Dy/

0

jQuery Selector tag is not right...

$(document).ready(function () {
$("div.section_content_wrapper , div#pulldown_tab").click(function () {
    $("div.section_content_wrapper  , div#cream_of_the_craft").slideToggle("slow");
});

});

for using multiple selector in jquery

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.