jQuery - Hide and Show a div

On this page: http://www.ubhape2.com/formhelp.html

I have 3 file uploads. I have it set now that when you click "Add Another File" it shows the next file upload. Works开发者_运维知识库 great. I want to tweak it a touch. When you click Add Another File the next one shows and the "Add Another File" Image goes away. The file input itself is still there only the add button changes to a display:none. I can't get this to work right. Either the entire file input hides or nothing hides.

Thanks for the help!

Try to modify your showfilehide functions in that way:

function showfilehideN()
{
    document.getElementById('addfileN').style.display='none';
    document.getElementById('filehideN').style.display='block';
}

N is for number of function (showfilehide1 for instance)

give different ids for each a tag and on a tag click hide the corresponding a tag.

Give your image button a class name . Then you can do something like the generic example below

var x = 'Test<img class="upload" src="http://www.ubhape2.com/images/Icons/addfile.png" /><br>';
$('.upload').live('click', function() {
    $(this).hide();
    $('body').append(x);
})

Modify as you see fit so it works for your site.

Check working example at http://jsfiddle.net/Qgq8B/

USe only one button to show/hide the other two fileUploads,

JavaScript section,

             function ShowNextFileUpload()
             {
                var File2=document.getElementById('<%=File2.ClientID%>');
                var File3=document.getElementById('<%=File3.ClientID%>'); 

                if(File2.style.display=="none")
                {
                   File2.style.display="block";
                } 
                else
                {
                   File3.style.display="block";
                }
             }

Aspx section,

         <asp:FileUpload ID="File1" runat="server" />
         <asp:FileUpload ID="File2" runat="server" style="display:none"/>
         <asp:FileUpload ID="File3" runat="server" style="display:none"/>
         <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="ShowNextFileUpload()">Add Another</asp:LinkButton>

Hope this helps...

check this out

<input type="button" id="upldBtn" value="Add file" onclick="loadNext();"
 crntNumber="1" />
<div id="divUpld1" style="display:block;"></div>
<div id="divUpld2" style="display:none;"></div>
<div id="divUpld3" style="display:none;"></div>

now goes the script

<script type="test/javasript">
function loadNext(){
    var crntNumber = $('#upldBtn').attr("crntNumber");
    $("divUpld"+crntNumber).fadeOut(200, function(){
        $("divUpld"+crntNumber).css("display", "none");
        crntNumber++;
        $("divUpld"+crntNumber).fadeIn(200, function(){
              $("divUpld"+crntNumber).css("display", "block");
        });
        $('#upldBtn').attr("crntNumber", crntNumber);
    });
}
</script>

hope it helps.