Grow your CSS skills. Land your dream job.

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.

    Rob
    # December 22, 2008 at 5:14 pm

    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

    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

    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’);
    });
    });
    Rob
    # December 23, 2008 at 1:39 pm
    "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.

*May or may not contain any actual "CSS" or "Tricks".