toggle information on and off, pulling from separate file

I'm writing code that will, when a button is clicked, display some simple text (a changes log), and then when clicked again 开发者_如何学编程will hide it.

The trick here is that I'd like to keep that change log in a separate file, and call it for display. I've got code like follows:

    echo "<input type=\"button\" id=\"recentchanges\" value=\"Show/Hide Recent Changes\" /></br><span id=\"changestext\"></span>";

And:

$('#recentchanges').click(function() {

    $('#changestext').append(test/recentchanges.txt);

});

So my questions are. 1. How can I hide/show by clicks? It doesn't look like .toggle() is what I want.. but perhaps it is.. And 2. How can I call data from a separate file? (and as part of that question, should it be a txt file or an html file? Should I have the text formatted with html, or just raw text?)

to your first question

$("#element").click(function(){
    $("#element").toggle();
});

to your second

$.get('texts/recentchanges.txt', function(data){
   $('#changestext').append(data);
});

1. using toggle() of the your block:

   $('#recentchanges').click(function() {
       $('#changestext').toggle();
   });
   

2. Using .load() or GET request to the file

   $.ajax({
       type: "GET",
       url: file,
       async: false,
       success: function(data){
           $('#changestext').text(data);
       }
   });
   

$('#recentchanges').click(function()
{
    $('#changestext').load('test/recentchanges.txt', function()
    {
         $(this).show();
    });
});

$('#changestext').click(function(){
    $(this).hide(); // You can only click it if it's visible
});

If you have a series of items, such as a Q&A or FAQ, this is a simple pattern to follow. You can put the hidden text inline.

<a class="question" href="javascript://">Question 1</a>
<div class="answer" style="display:none">--- some text --</div>

<br /><a class="question" href="javascript://">Question 2</a>
<div class="answer" style="display:none">--- some text --</div>

jQuery:

$('a.question').click(function() {
     $(this).next('.answer').toggle() 
})