jQuery – selecting something that is clicked

  • # December 22, 2008 at 4:13 pm

    Website: http://stuckpixelstudio.com/clients/cro … stries.php

    So what I’m going for is when you click on a header with the class ".ministriestitle" , the contents in a paragraph with the class ".ministrydetail" slides down, and when you click it again it slides back up. I was able to make this work fine, but whenever you would click on one of the headers, ALL of the paragraphs would show. So, by referencing my "Learning jQuery" book, I tried to combine some (function(event) stuff with my .toggle thing, but I can’t seem to get it to work. I dunno if I’m missing a parenthesis or a bracket, or if there is something wrong with how I’m doing this. So, here’s the code:

    Code:
    $(document).ready(function()
    $(‘.ministriestitle’).toggle(function(event) {
    if (event.target == this) {
    $(‘.ministrydetail’).slideDown(‘fast’);
    }, function() {
    $(‘.ministrydetail’).slideUp(‘fast’);
    }
    });
    });

    Thanks guys.

    # December 22, 2008 at 5:14 pm

    This reply has been reported for inappropriate content.

    In the first like you have forgotten to open your curlies… you are missing a {

    $(document).ready(function()

    should be

    $(document).ready(function() {

    If that dont fix it, give this a try…

    Code:
    $(document).ready(function() {

    $(“.ministriestitle”).toggle(function() {
    $(“.ministrydetail”).slideDown(“fast”); },
    function() {
    $(“.ministrydetail”).slideUp(“fast”); });
    });

    });

    I kinda just did it off the top of my head, not too good with jQuery yet so dont expect much :D

    # December 22, 2008 at 6:11 pm

    This reply has been reported for inappropriate content.

    Didn’t fix it. I’m sure that missing brace would have had some kind of ill effect, however that apparently isn’t my problem.

    Firebug says there is a syntax error on line 5:

    Code:
    syntax error
    }, function() {
    # December 23, 2008 at 12:44 pm

    This reply has been reported for inappropriate content.

    I ended up finding this piece of code and changing some classes and it did exactly what I was looking for!

    Code:
    $(document).ready(function()
    {
    //hide the all of the element with class ministrydetail
    $(“.ministrydetail”).hide();
    //toggle the componenet with class ministrydetail
    $(“.ministriestitle”).click(function()
    {
    $(this).next(“.ministrydetail”).slideToggle(‘fast’);
    });
    });
    # December 23, 2008 at 1:39 pm

    This reply has been reported for inappropriate content.

    "brianatlarge" wrote:
    I ended up finding this piece of code and changing some classes and it did exactly what I was looking for!

    Code:
    $(document).ready(function()
    {
    //hide the all of the element with class ministrydetail
    $(“.ministrydetail”).hide();
    //toggle the componenet with class ministrydetail
    $(“.ministriestitle”).click(function()
    {
    $(this).next(“.ministrydetail”).slideToggle(‘fast’);
    });
    });

    Brilliant! Thanks for posting the solutions :D Time to study and learn :D

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed