Grow your CSS skills. Land your dream job.

Show and hide div from clicking on an image

  • # April 12, 2013 at 6:13 am

    Hey,

    If you go to http://oandg.co.uk.s156312.gridserver.com/#work 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 img.info’).click(function(e) {
    e.preventDefault();
    $(‘.caption-background’).addClass(‘hidden’);
    });

    Any ideas?

    # April 12, 2013 at 6:26 am

    Should work: http://jsfiddle.net/gSVfV/

    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 – http://oandg.co.uk.s156312.gridserver.com/js/main.js

    # 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 img.info’ 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() {
    $(‘#colorbox’).fadeIn(1200);
    $.colorbox();
    });

    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() {
    $(‘#colorbox’).fadeIn(1200);
    $.colorbox();
    $(‘.rsABlock img.info’).click(function(e) {
    e.preventDefault();
    $(‘.caption-background’).toggleClass(‘hidden’);
    });
    });
    });

    # 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 http://codepen.io/htmlmainiac/pen/DErwn

    # 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.

    http://oandg.co.uk.s156312.gridserver.com/

    # June 29, 2014 at 5:07 am

    @CrocoDillon,

    I saw your previous post with this code http://jsfiddle.net/gSVfV/ and I want to use this in WordPress post, so, when I click on image to show this div with post content, so I need to have uniqe class for each post and than this code will functionated. So, I can make class of each post like this “post-16″ 16 is ID of post, so I need Jquery code something like this

    $(function() {
    $(‘.rsABlock img.info’ + postID).click(function(e) {
    e.preventDefault();
    $(‘.caption-background’ + postID).toggleClass(‘hidden’);
    });
    });

    I know that it isnt correct now, but if you can help me..
    Thank you!

    # June 29, 2014 at 6:08 am

    @danko,

    You don’t really need unique classes for this.

    I made a simple demo for you: http://jsfiddle.net/c3rQ2/

    Let me know if you need anything else.

    # June 29, 2014 at 6:32 am

    @CrocoDillon thank you a lot for this code!

    I need just more help from you…
    I am making this SCREENSHOT
    So, I need to click on this thumbnail (wich is wordpress post) and show this box with player and comments, and when click on anything else that box need to close down. So, every box have different content depends on post, I will put it inside POST LOOP. And one more thing, As I made this popUp box the last popUp box in row is outside of window, how to make that the last in row is inside window? If you understand me :) Thank you a lot for help!

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

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