Reveal content on click

Hello.

I understand how to reveal content within a div using hover, but how would I reveal content on click.

By using scripting to assign an onclick event to a suitable element, which would trigger a function to reveal the appropriate content.

Hi, I originally posted this in CSS but it got moved to JS.

I don’t know much about JS.

This is what I am trying to do.
I have some data in mysql which is being outputted via php.
When a user clicks ‘edit’. the text will be replaced by a form.

Do you want to learn how to do it yourself, or would you prefer to employ someone else to do it for you?

I would love to learn javascript but my main focus right now is PHP. I’m also using some jQuery in my code, so a jQuery method is preferred.

Then may I suggest that you continue along the PHP path, as that is the way that normally such edit field things are performed.

The edit button (or link) is clicked, which submits as the action and a line number.
The PHP script then creates a new version of the page where the appropriate line number uses a form input instead.

Once you have that side of things working, only then would JavaScript become involved to perform a small improvement to the user experience. The difference being to still send the action and line number to a PHP script, but instead to receive only the HTML that needs to be updated.

So get the editing side of things working first in PHP, and after that other things can be looked in to.

Hi, thank you for your response.

I have already created a form which updates the data.
What I want to do is replace the text with the form when a user clicks edit.
(similar to the way it works on this forum. when you want to edit your post it replaces the text with the form.)

When you click the edit button, the web page sends a request to a php script to retrieve the edit panel for that particular message.

Here’s the URL that the request is sent to.

[http://www.sitepoint.com/forums/ajax.php?do=quickedit&p=4920153

What happens though when scripting is not available? You instead go along to this link, where the edit can also be performed.

http://www.sitepoint.com/forums/editpost.php?do=editpost&p=4920153

It is that fundamental basis which underlies the technique that you want to achieve. Start with PHP scripting to perform the base actions that you wish to perform, and only once the you have those fundamental basics working do you use scripting to request the parts that you require from your working base.

Hi, thank you for your response.

As mentioned earlier, I have already created a query and a form that allows me to edit the data.

What I want to do is when I click the “edit” button the data is replaced with the form, without having to move to another page.

You will need a PHP script that provides the HTML content for the edit section, so that the web page can request that content for the appropriate line.
Once the Ajax request receives that data, you can then place that data in the page where you need it.

The best way that I’ve found for people to learn how to use Ajax in safe and effective ways is via the book Bulletproof Ajax

Hi

I’ve managed to replace the text with a form when a link clicked but when I implement this into my output loop in php it replaces the first row, not the row that I clicked edit on.


$(document).ready(function() {
  $("#editbutton").click(function() {
    $("#postcontainer").replaceWith(
    
    
    '<form name="form1" method="post" action=""><p><label for="textarea"></label><textarea name="editpost" id="textarea" cols="45" rows="5"></textarea></p><p><input type="submit" name="editpost_submit" id="button2" value="Submit"></p></form>'

); 
  });
});