Question

I have a bit of web design that I’m trying to solve with efficient Jquery, and it’s had me stumped for the past day. So I thought I’d turn to the experts at StackOverflow for help.

The Challenge:

I have a page with three div columns. Column 1 shows full resolution images. Column 2 shows large thumbnails of the elements that are currently displayed in column 1. Column 3 is a selector column that shows all available elements I can add.

I’ve been trying to code the following two functions using efficient jquery without luck:

• If you click on any item in column 3 (the full selection column) – it correspondingly makes the div for the item visible in 2 and visible in 1
• If you click the close button for any item on column 2, it hides the corresponding div in column 2 and the corresponding div in column 1.

See example: http://jsfiddle.net/mzhang23/CGfzq/8/ – this one tries to implement the html5 “data-eltype” suggested solution below without luck. What am I doing wrong?

Answer 1

I think the key is that you should store your data properly in with the objects. You an do this either through CSS descriptors or though HTML5-style data.

Your objects then look like this:

<div class="columnA">
   <div class="element house"></div>
</div>

<div class="columnB">
   <div class="element house"></div>
</div>

<div class="columnC">
   <div data-eltype="house" class="element"></div>
</div>

<script type="text/javascript">
$(document).load(function(){
    $('.columnC .element).click(function(){
       $('.columnA, .columnB').find('.' + $(this).data('eltype')).show();
    }); 
});
</script>

Although there are DOZENS of ways to do this, presented above is a simple bit of code that utilizes both CSS selectors along with HTML5 data. When an object in columnC is clicked, it utilizes the eltype data descriptor to toggle the visibility of the items in columns A & B.

You might consider building a JSFiddle with a more detailed set of objects if you need additional help beyond this base-level description.