Question

I am new to jquery and javascript but am practising by doing. I would like to create a simple click function where content below is revealed. Simple stuff you say. For some reason it is not in my case. I have an example at http://jsfiddle.net/richlewis14/FRP3R/1/.

What I want to do is click on the h3 element and then it will reveal all the content underneath. What I would also like to do is not use the slideUp function to hide the content first as when loading the page you can see the content disappear, which looks a little tacky to me. Do I need to hide the div rather than slideUp on load?

HTML:

<div class="container">
      <div class="row">
      <div class="span4">
      <div class="widget">
        <div class="widget-header">
          <i class="icon-info-sign icon-large"></i>
           <h3 class="clickme">Core</h3>
        </div><!--/widgetheader-->
         <div class="widget-content-box">
          <p>Hello</p>


         </div><!--/widget content-->
        </div><!--widget-->
      </div><!--span4--><div class="container">

JavaScript:

$(".widget-content-box > p").slideUp();
$("h3.clickme").click(function(){
    $(this).next.slideToggle("slow");
});

Any help appreciated, thanks

Answer 1

There is a typo in your code next should be next(). also note that you should first use parent() and then next() method(‘.widget-content-box’ is not the next sibling of your h3 element) and when you hide the p element .widget-content-box has nothing visible to show, you should hide the .widget-content-box instead.

$(document).ready(function(){
    $(".widget-content-box").slideUp(); // $(".widget-content-box").hide()
    $("h3.clickme").click(function(){
        $(this).parent().next().slideToggle("slow");
    });
})

http://jsfiddle.net/qxnjj/