Grow your CSS skills. Land your dream job.

Show and hide div from clicking on an image

  • # April 12, 2013 at 6:13 am


    If you go to and select a portfolio item and click ‘More’ you will see an image and a text box with a little ‘i’ in the corner.

    I would like to make it so if you clicked the little ‘i’ the text box would disappear and if you clicked it again it would show.

    I tried this but it does nothing:

    $(‘.rsABlock’).click(function(e) {

    Any ideas?

    # April 12, 2013 at 6:26 am

    Should work:

    You have some errors though, check your log.

    Are you sure you add that click listener after that part of the DOM is loaded?

    # April 12, 2013 at 6:49 am

    Yeah that didn’t seem to work either. I am not entirely sure what is actually causing the main error – I can’t even find that code in my main.js file.

    Javascript isn’t really my thing so this is just trial and error for me!

    Here is my full js file with compression –

    # April 12, 2013 at 6:58 am

    You can try to upload that file without compression so you get useful console feedback about that error (line number).

    # April 12, 2013 at 7:05 am

    Ah okay – I have managed to get rid of the errors. Still no luck with the show/hide though

    # April 12, 2013 at 7:23 am

    Ah… you need to attach that click listener after you opened the box and the ‘.rsABlock’ is actually in the DOM. If you can attach a callback to whatever function you use to open the box, that’d be the right place to attach that click listener.

    # April 12, 2013 at 7:33 am

    For example, try to put that function inside this:

    $(“.openBoxButton”).click(function() {

    on line 420, right after `$.colorbox();`. That might work… but I’m not sure if it still works after you clicked the ‘next’ arrow.

    # April 12, 2013 at 7:38 am

    Like this?

    $(function() {
    $(“.openBoxButton”).click(function() {
    $(‘.rsABlock’).click(function(e) {

    # April 12, 2013 at 7:45 am

    Yes, did it work?

    # April 12, 2013 at 7:56 am

    Nope ha this is so frustrating

    # April 13, 2013 at 2:44 am

    i have a pen that does it here

    # April 13, 2013 at 8:23 am

    Thanks but that still gets ignored! I think it is because the colorbox is loaded after everything in the DOM so the script is always loaded before.

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

You must be logged in to reply to this topic.

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