Hey everyone!

I'm new to jQuery, and I've run into a bit of trouble on my site. Essentially, I want the div called "project-text" to slide open when you click on the image. Since I have multiple portfolio pieces, I want the previous project-text that was open to slide closed.

My HTML looks like this:

    <!-- PROJECT -->
    <div class="project-wrapper">

        <img src="../images/portfolio/image.jpg" width="352" height="123" alt="image" />

        <div class="project-text" style="display:none;">

            <h4>Text Heading!</h4>
            <a href="#" class="btn-visitSite" target="_blank">visit site</a>
            <div class="clear" style="border-bottom:1px solid #404040; margin:10px 0;"></div>

            Text Text Text Text Text!!!
        </div>

    </div>
    <div class="project-btm"></div>
    <!-- END PROJECT -->

Inside my $(document).ready() I have:

    var isVisible = $('.project-text').is(':visible');
var isHidden = $('.project-text').is(':hidden');

$(".project-wrapper img").click(function(){
    $(this).toggleClass("active");

    if($(this).next().is(':hidden')){
        $(this).next().slideDown("fast");
    }else{
        $(this).next().slideUp("fast");
    }
});

Thanks in advance for any help. I'm more of a designer rather than a programmer, so my brain is having trouble grasping this ;). I could probably just install a pre-made accordion, but I want to learn how to do things on my own rather than just installing other people's plugins all the time.

2 answers

Ktash 1851
0
points

There is a lot easier way to accomplish what you are trying to do, as long as I understand the goal. Just make your JS code:

$('.project-wrapper img').click(function(e){
    $(this).toggleClass('active');
    $('.project-text').slideUp("fast");
    $(this).next('.project-text').slideDown('fast');
}

My JQuery is a little rusty, but that should be all you need.

Answered over 8 years ago by Ktash
0
points

Thanks for the quick response, however, that method did not work. When I plugged in the code the "project-text" div did not slide open at all when you click on the image.

I played around more with it and got it to work. It's still not perfect, as I'd like to be able to close the divs again after you open them. But for the most part it's what I'm looking for. I also need to figure out how to get rid of the flicker that happens when you click on the iamges.

This is all the jQuery I had to write to get the portfolio sections to work the way I want them to:

// PORTFOLIO IMAGES

$(".project-wrapper img").mouseover(function(){
    $(this).fadeTo("fast",1);
});

$(".project-wrapper img").mouseout(function(){
    if($(this).hasClass("active")){
        $(this).fadeTo("fast",1);
    }else{
        $(this).fadeTo("fast",.65);
    }
});

var isVisible = $('.project-text').is(':visible');
var isHidden = $('.project-text').is(':hidden');

$(".project-wrapper img").click(function(){
    $(this).addClass("active");

    if($(".project-wrapper img").hasClass("active")){
        $(".project-wrapper img").removeClass("active");
        $(this).addClass("active");
        $(".project-wrapper img").fadeTo("fast",.65);
        $(this).fadeTo("fast",1);
    }else{
        $(this).addClass("active");
        $(this).fadeTo("fast",1);
    }

    if($(".project-wrapper img").next().is(':visible')){
        $(".project-text").slideUp("fast");
        $(this).next().slideDown("fast");
    }else{
        $(this).next().slideDown("fast");
    }
});

// END PORTFOLIO IMAGES
Answered over 8 years ago by Jared Tomeck
  • Ohh, that was my bad. My code should work now. I forgot to add a next when calling the $(this) and it was instead trying to slideDown the image Ktash over 8 years ago