Question

If i want to click the “.img” class then the div class=”hide pane pane_right” will show off without affecting the others. here’s my code

<ul class="admin-list">
    <li>
    <!--IOS Start-->
    <div class="wrapper">
        <div class="pane pane_left" style="display:none;">
            <a class="img ios-delete icon-minus" href="#"></a>
        </div>
        <div class="hide pane pane_right">
            <button class="ios-buttons btn btn-danger" href="#">delete</button>
        </div>
        <div class="pane pane_center">
            <div class="pane__content">
                <a href="#">[module]_setup_mysql.sql</a>
            </div>
        </div>
    </div>
    <!--IOS  End-->
    </li>
    <li>
    <!--IOS Start-->
    <div class="wrapper">
        <div class="pane pane_left" style="display:none;">
            <a class="img ios-delete icon-minus" href="#"></a>
        </div>
        <div class="hide pane pane_right">
            <button class="ios-buttons btn btn-danger" href="#">delete</button>
        </div>
        <div class="pane pane_center">
            <div class="pane__content">
                <a href="#">labels_en.po</a>
            </div>
        </div>
    </div>
    <!--IOS  End-->
    </li>
    <li>
    <!--IOS Start-->
    <div class="wrapper">
        <div class="pane pane_left" style="display:none;">
            <a class="img ios-delete icon-minus" href="#"></a>
        </div>
        <div class="hide pane pane_right">
            <button class="ios-buttons btn btn-danger" href="#">delete</button>
        </div>
        <div class="pane pane_center">
            <div class="pane__content">
                <a href="#">labels_zh-hans.po</a>
            </div>
        </div>
    </div>
    <!--IOS  End-->
    </li>
    <li>
    <!--IOS Start-->
    <div class="wrapper">
        <div class="pane pane_left" style="display:none;">
            <a class="img ios-delete icon-minus" href="#"></a>
        </div>
        <div class="hide pane pane_right">
            <button class="ios-buttons btn btn-danger" href="#">delete</button>
        </div>
        <div class="pane pane_center">
            <div class="pane__content">
                <a href="#">labels_zhhans.po</a>
            </div>
        </div>
    </div>
    <!--IOS  End-->
    </li>
</ul>

and here’s my jquery

    //create an array to store the header id's
    tableTitle = new Array();
    //iterate through each h2 header element
    $('.img').each( function(index) {
        //store each h2 id in the array
        tableTitle[index] = $(this).attr('id');
    });

$(document).ready(function(){
    //when user clicks on a header
    $(".img").click(

        function(){
                //create a loop to close all of the paragraphs after user click
                for (var i=0; i<3; i++) {
                    $('#'+tableTitle[i]).find(".pane_right").hide();

                }

        $(".wrapper").ready(function(){     
            //check the css of the paragraph associated with the clicked header
             if($(this).find(".pane_right").css('display') == 'none'){
                //if display is set to none in css, show the paragraph
                $(this).find(".pane_right").show();
                $(this).width('56%');
            }else{
                //if the display is not set to none, hide the paragraph
                $(this).find(".pane_right").hide();
            }
            });
        }

    );

}); 

Answer 1

Based on your fiddle and you comment, I have a few pointers for ya. First off, this:

//create an array to store the header id's
tableTitle = new Array();
//iterate through each h2 header element
$('.img').each( function(index) {
    //store each h2 id in the array
    tableTitle[index] = $(this).attr('id');
});

Does not really do anything as there are no ID’s asigned to any of the elements containing class img. In other words you can scratch this previous piece of code all together. Also, quick rule on some basics, anything that is before $(document).ready(function(){ is considered “global” and functions like your .each statement wont run in your head this way. It will work in a jsfiddle, but thats because fiddle wraps you js in the doc ready function.

Also, in newer jQuery, you can substitute $(document).ready(function(){ /* do work */ }) with $(function(){ /* do work */ }) which of course is shorter and easier to remember.

Secondly, I notice alot of class use when you need more specifics. Not a problem, I can show you some great jQuery for this without using ID’s. You must understand though, with jQuery selectors, they are just like CSS. a # is used in front of an elements ID to get that EXACT FIRST MATCH ELEMENT.

For example:

// HTML
<a id="bob" href="javascript:void()">click 1</a>
<a id="bob" href="javascript:void()">click 2</a>
<a id="bob" href="javascript:void()">click 3</a>

// Some Script
console.log( $("#bob").text() ); //  will result in "click 1"
// There reason only "click 1" will display is because it is the FIRST MATCHING ID

On the other hand, a class selector such as $(".img") will of course grab EVERY SINGLE ELEMENT CONTAINING THAT CLASS, no matter what it might be called from. So in your example, on the .img").click(... (you did correctly btw), the .wrapper call inside is grabbing everything that has the class wrapper. According to your comments, this is undesired.

Thus, the rewrite below:

First rewrite, not sure why you’re adjust the center column’s width on click, when its never adjusted back, thus it can be adjusted right from start. and use the click to simply toggle the delete button, like so:

//  simple breakdown
$(".pane_center").width('56%');
$(".img").click(function(e){
    //  calls for the parent wrapper so we can grab anything within
    var wrapper = $(this).parents(".wrapper").first();
    //  grab the child that needs hidden
    wrapper.find(".pane_right").toggle();
});

OR could be written

$(".pane_center").width('56%');
$(".img").click(function(e){
    //  This only works with the html sequence as you have it
    //  simply grabs the img parent and then its sibling that needs hidden
    $(this).parent().siblings(".pane_right").toggle();
});

However, if you had wanted to do something after the column was hidden, you can use the toggle’s callback function:

$(".img").click(function(e){
    $(this).parent().siblings(".pane_right").toggle(function(e) {
        if ($(this).is(":visible")) {
            $(this).siblings(".pane_center").width('56%');
        }
        else {
            $(this).siblings(".pane_center").width('');
        };
    });
});

Try each of these in your fiddle, you’ll find they all work, the question is your true intent.

jQuery References:

• Selectors
• parent()
• parents()
• first()
• siblings()
• toggle()