Question

I am new to jQuery. I have PrimeFaces dataTable. when it is converted to html. The code looks like this

<div id="FaqGridForm:faqGrid" class="ui-datatable ui-widget" style="height:450px;">
    <div id="FaqGridForm:faqGrid_paginatortop" class="ui-paginator ui-paginator-top   ui-widget-header ui-corner-tl ui-corner-tr" style="">
        <table>
            <thead>
                <tr>
                    <th id="FaqGridForm:faqGrid:j_idt66" class="ui-state-default"></th>
                </tr>
            </thead>
            <tbody id="FaqGridForm:faqGrid_data" class="ui-datatable-data">
                <tr id="FaqGridForm:faqGrid_row_0" class="ui-widget-content ui-datatable-even">
                    <td>
                        <div id="question">
                            <label style="color:#0074c7;font-size:15px;font-weight:bold"> Q:</label>
                            <img id="FaqGridForm:faqGrid:0:j_idt69" height="10" width="10" src="/TDAP/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces&amp;v=2.2.RC2">
                            <span style="color:#0074c7;font-weight:bold">Customizeddddd development functionality?</span>
                        </div>
                        <img id="FaqGridForm:faqGrid:0:j_idt72" height="10" width="480" src="/TDAP/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces&amp;v=2.2.RC2">
                        <br>
                        <br>
                        <div id="answer">
                            <label style="color:#0074c7;font-size:15px;font-weight:bold"> A:</label>
                            <img id="FaqGridForm:faqGrid:0:j_idt75" height="10" width="10" src="/TDAP/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces&amp;v=2.2.RC2">
                            This activity executes the configuration, development,     iteration and creation of the Trade Portal elements as defined in the Design Phase. BearingPoint will customize and develop a..
                            <br>
                        </div>
                        <div class="horizontalline"></div>
                    </td>
                </tr>
                <tr id="FaqGridForm:faqGrid_row_1" class="ui-widget-content ui-datatable-odd">
                    <td>
                        <div id="question">
                            <img id="FaqGridForm:faqGrid:1:j_idt72" height="10" width="480" src="/TDAP/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces&amp;v=2.2.RC2">
                             <br>
                             <br>
                        <div id="answer">
                            <div class="horizontalline"></div>
                    </td>
                </tr>
                <tr id="FaqGridForm:faqGrid_row_2" class="ui-widget-content ui-datatable-even">
                <tr id="FaqGridForm:faqGrid_row_3" class="ui-widget-content ui-datatable-odd">
                <tr id="FaqGridForm:faqGrid_row_4" class="ui-widget-content ui-datatable-even">
            </tbody>
        </table>
    </div>

Only first tr i shown, that what it looks like in expanded mode. All the remaining are the same. Now i want that when my page loads. Then all the div that have id=”answer. Should not be visible. So when page loads only div id = “question” are shown.
Now when you click on question , then only that row div with id=answer shown, and question hide. And if you again click on the answer, then that row div with id=”question appears, and answer hide.

I tried this

(function($){

    $('#FaqGridForm\\:faqGrid tbody').find('tr:has(td)').each(function(){

        var $tr = $(this);
        var $td = $tr.children().find(':has(div #answer)');

        return $td;

    }).hide();


    $('td').click(function(){

        //var colIndex = $(this).parent().children().index($(this));

        var $clickedItem = $(this);

        var parent = $clickedItem.parent();
        var children = parent.children();
        var index = children.index($clickedItem);

        var $rowClickedItem = $(this);
        var rowParent = $rowClickedItem.parent();
        var parent1 = rowParent.parent();
        var children1 = parent1.children();
        var rowIndex = children1.index(rowParent);

        var rowIndex2 = children1.index(rowParent);

        //var rowIndex = $(this).parent().parent().children().index($(this).parent());
        alert('Row: ' + rowIndex + ', Column: ' + colIndex);
    });


})(jQuery); //end of (function($)

But my selector is not working. The thing that i am trying to do is , find each row, that has child td with div id=answer, and hide it.

what i am doing wrong. As i told i am new, that’s why i am doing wrong :(. Please help.

Thanks

Edited
————————————————————————–

This is the Primeface table

<div class="newsandupdates1">
    <div class="greyblock">
        <div class="block1" >
            <h:commandLink action="#{faqGrid.toHomePage}" value="Home"/> > FAQ <br></br>
            <br></br> <u><br></br></u>
            <div class="topright"><u> 
                <h:commandLink value="Add FAQ"  action="#{faqGrid.addNewFaq}"
                               rendered="#{faqGrid.showPanel}"/></u><br></br></div></div><br></br>
                <p:dataTable id="faqGrid" var="faqList" value="#{faqGrid.faqCategoryList}" paginator="true" rows="5" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PageLinks} {LastPageLink} " height="400" paginatorPosition="top" style="height:450px;">

                    <p:column >
                        <div id="question">
                            <h:outputLabel value="Q:" style="color:#0074c7;font-size:15px;font-weight:bold"/>
                            <p:spacer width="10" height="10" />
                            <h:outputText value="#{faqList.question}" style="color:#0074c7;font-weight:bold"/>
                        </div>
                        <p:spacer width="480" height="10" />

                        <br></br><br></br>
                        <div id="answer">
                            <h:outputLabel value="A:" style="color:#0074c7;font-size:15px;font-weight:bold"/>
                            <p:spacer width="10" height="10" />
                            <h:outputText value="#{faqList.answer}"/><br></br>
                        </div>
                        <div class="horizontalline"></div>
                    </p:column>
                </p:dataTable>
            </div>
        </div>

Answer 1

/*
 * When we write jQuery plugins we, of course, must assume that the jQuery library is  loaded. We
 * cannot assume, however, that the $ alias is available. Recall that the $.noConflict() method can
 * relinquish control of this shortcut. To account for this, our plugins should always call jQuery
 * methods using the full jQuery name or internally define $ themselves.
 *
 * Especially in longer plugins, many developers find that the lack of the $ shortcut makes code
 * more difficult to read. To combat this, the shortcut can be locally defined for the scope of the
 * plugin by defining a function and immediately invoking it. This syntax for defining and invoking
 * a function at once, often referred to as an Immediately Invoked Function Expression (IIFE),
 * looks like the following code snippet:
 *
 * The wrapping function takes a single parameter, to which we pass the global jQuery object. The
 * parameter is named $, so within the function we can use the $ alias with no conflicts.
 *
 * The .ready() method has one more trick up its sleeve to help us in this situation.
 * The callback function we pass to it can take a single parameter: the jQuery object itself. This
 * allows us to effectively rename it without fear of conflicts, as shown in the following code snippet:

   jQuery(document).ready(function($) {
       // In here, we can use $ like normal!
   });
 *
 * Or, using the shorter syntax we learned in the preceding code:

     jQuery(function($) {
       // Code that uses $.
     });
 */

(function($){

    $('#faqGrid tr td').each(function(){

        var $td = $(this)
        $td.children('div .answer').hide();

//        **
//        *Gives you all children as an object array
//        * 0: div
//        * 1: div
//        * 2: div#question
//        * 3: img#faqGrid:0:j_idt77 /TDAP/fa...=2.2.RC2
//        * 4: br
//        * 5: br
//        * 6: div#answer
//        * 7: div.horizontalline
//        */
//        var tdChildrenArray = $(this).children();
//
//        var divChildrenArray = $(this).children('div');
//
//        var elementStack;
//
//        $.each(divChildrenArray, function(index, value){
//
//           var $div = value;
//
//           if ($div.attr('class')) {
//
//               var $divClass = $div.attr('class');
//
//               if ($divClass == 'answer') {
//
//                  var colNum = $(this).cellIndex;
//                  //$cells = $cells.add($div);
//                  $(value).hide();
//
//               } //end of if ($divId == 'answer')
//
//           } //end of if ($div.id)
//
//        }); //end of  $.each(object, fn)
//
//        //return $(this).pushStack($cells);
//
    }); //end of $('#faqGrid tr td').each(fn)

   /**
    * The .toggle() event method takes two or more arguments, each of which is a function. The first
    * click on the element causes the first function to execute; the second click triggers the
    * second function, and so forth. Once each function has been invoked, the cycle begins again
    * from the first function.
    */
   $('#faqGrid tr td').toggle(function(){

       var $td = $(this)
       $td.children('div .answer').addClass('selected').slideDown('slow', function(){

           $td.children('div .question').slideUp('slow').hide();

      });

   }, function(){

       var $td = $(this)
       $td.children('div .question').addClass('selected').slideDown('slow', function(){

           $td.children('div .answer').slideUp('slow').hide();

        });

    }); //end of $('#faqGrid tr td').toggle

})(jQuery); //end of (function($)