Question

I’m trying to show appropriate content using this method: determine id of the clicked div, than open div content with determined id + ‘-box’. But it doesn’t work.

JQuery that doesn’t work:

$(".portfolio-apps section").click(function() {
    var currentID = '#' + $(this).attr('id');
    console&&console.log(currentID);
    var currentIDBox = currentID + "-box";
    console&&console.log(currentIDBox);
    $(currentID).click(function() {
        $('.portfolio-entry-text').hide('fast');
        var bcn = $(currentIDBox);
        if ($('.box-content').is(':visible')) {
            $('.box-content').hide();
            bcn.show();
        }
        else {
            $('.box-content').hide();
            bcn.slideToggle(200);
        }
    });
}); 

Similar JQuery that is working:

$("#gterminal").click(function() {
    $('.portfolio-entry-text').hide('fast');
    var bcn = $('#gterminal-box');
    if ($('.box-content').is(':visible')) {
        $('.box-content').hide();
        bcn.show();
    }
    else {
        $('.box-content').hide();
        bcn.slideToggle(200);

    }
});

HTML

<div class="portfolio-apps clearfix">
         <section class="button" id="gterminal">
            <span>Google in Terminal</span>
         </section>
         <section class="button" id="MySQLToJSON">
            <span>MySQL to JSON</span>
         </section>
        </div>


<div id="wrapper" >
      <div class="box-content" id="gterminal-box">
          <p>BOX 1</p>
      </div>

      <div class="box-content" id="MySQLToJSON-box">
          <p>BOX 2</p>
      </div>
</div>

Answer 1

You’re binding a .click event internally, which means that the -box showing/hiding won’t be triggered until a second click. This doesn’t make sense to me. If you just remove the internal .click binding, it seems to work quite nicely:

http://jsfiddle.net/Th3wT/