Question

I have 2 layout in my website, one is listview and other is gridview. I am changing the layout on clicking the icons. The listview part is working fine but for the gridview, it makes the parent tr style=”display:block” but inside the, tr->td->div tag style is =”display:none”.

I have tried to change it by directly using the class of the div tag and also using the children property in jquery but Ii is not working at all.

Here is jquery code:

 function changeLayout(layout)
{
    if(layout=='list')
    {
        $(".showGrid").hide();
        $(".showList").show();      
    }
    else if(layout=='grid')
    {
        $(".showGrid").show();
        $(".showList").hide();      
        $(".showgridview").children("div").show();
    }
}

here is website also, if you need to check out.

http://www.cityeveryday.com/frontend/deals/index/all/all

Thanks

Answer 1

Unless I’m misunderstanding you…

The following code will only affect direct children of the selected element

$(".showgridview").children("div").show();

What you want is .find() – http://api.jquery.com/find/

$(".showgridview").find("div").show();

This will find all descendants regardless of level.