asked on

How to toggle div inside a Repeater control in Javascript/Jquery?

Hi Experts,

I've some DIV blocks inside a repeater control. All what I want is I need to toggle (show/hide) the div blocks based on some condition. I need to do in client side either using a Javascript function or a JQuery.

It's urgent. Please do post your answer. Thanks in advance.

<asp:Repeater ID="Educationpastcontent" runat="server" DataSource="<%# Model.PastAudioConf %>">
            <ItemTemplate>
               
                <div id="divlnkbtn" style="margin-top: 20px; margin-left: 75px; font-size: 12px;
                    float: left; width: 150px; height: 50px;">
                    <asp:LinkButton ID="LinkButton2" Text='Click here to play this audio' CommandArgument='<%# Eval("ID") %>'
                        CommandName='<%# Model.audioRelativeFilePath %>' OnClick="LinkButtonClickEvent" OnClientClick="StopAudio();"
                        runat="server"></asp:LinkButton>
                </div>                
                <div id="divDownloadFlash" style="margin-top: 20px; margin-left: 75px; font-size: 12px; float: left; width: 220px;
                    height: 50px;">
                    <span style="color: Red">Required version of flash is not installed on your machine.</span>
                    Please click <a id="linkDownloadFlash" target="_blank" href="http://www.adobe.com/go/getflashplayer">
                        here</a> to download latest version of flash plugin
                </div>
                
            </ItemTemplate>
            <SeparatorTemplate>
                <div class="clear" style="margin-top: 5px; border-bottom:1px solid #c5c5c5;">
                </div>
            </SeparatorTemplate>
        </asp:Repeater>

Open in new window

SOLUTION

Bardobrave

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Anuradha Goli

Add runat = server for the div you want to hide and in code behind

Check condition in row databound and based on condition use

 divlnkbtn.Attributes.Add("style", "display:none");
 divlnkbtn.Attributes.Add("style", "display:block");

Open in new window

Easwaran Paramasivam

ASKER

I look for either Javascript or JQuery function.

SOLUTION

Bardobrave

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ramkisan Jagtap

Which div you want to toggle and on which event?

Easwaran Paramasivam

ASKER

On loading the page divlnkbtn should be visible and divDownloadFlash should be hidden.
On another button click (not shown here) the reverse should happen.

leakim971

>On another button click (not shown here) the reverse should happen.

and this click reload the page/do a postback?

ASKER CERTIFIED SOLUTION

Ramkisan Jagtap

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Easwaran Paramasivam

ASKER

I'm no more in the project. Thanks for your info.