I have a container with a link and some text inside. When the link is clicked, I want to change both the link itself and the content within the container.
There are two different links:
<a href="#" class="add1> Add </a>
<a href="#" class="add2> Subtract </a>
Here is what I need:
1) By default, the "Add" link should be displayed, along with the content inside
<div id="addcontent1">under<div id="answer">.2) When the user clicks on the "Add" link, the data inside
<div id="addcontent2">should replace the content inside<div id="answer">, and the "Add" link should be replaced by the "Subtract" link.3) If the user clicks on the "Subtract" link, the original content inside
<div id="addcontent1">should return to<div id="answer">, and the "Subtract" link should switch back to the "Add" link.
Main section:
<div class="change">
<div class="col-md-2">
<a href="#" class="add1> Add </a>
</div>
<div class="col-md-10">
<div id="answer">The updated data will display here after clicking one of the above tabs.</div>
</div>
</div>
Content to be replaced:
<div id="addcontent1">
Random text will appear here
</div>
<div id="addcontent2">
<form action="action_page.php">
<input type="text" name="name" >
<input type="submit" value="Submit">
</form>
</div>