March 7, 2012
How can i change an inline css style when clicking a link?
Question by Lucas Matos
i have a form hidden with inline style="display: none;"
how can i dinamicaly change this style to style="display: inline;"
when a link on the page is clicked?
Answer by Starx
Prety simple
<a href="#" onclick="document.getElementById('myform').style.display = 'inline';">Click me</a>
Update
jQuery is a lightweight JavaScript library that can do tons of cool stuff, with writing a very less script from the developers side.
First of all, I suggest you to read “How jQuery works?“, is has everything you need to get started using the jQuery.
I will explain the code I wrote in the fiddle.
First of all the link & form
<a id="linktotoggle" href="#">Click Me</a>
<form id="formtotoggle"></form>
Remember the id in the link and form above. That is how we are going to select the element in the script just like what document.getElementById()
does.
Lets hide the form by default
#formtotoggle { display: none; }
Now lets write the jquery
$(document).ready(function() {
// ^ This is an event, which triggers once all the document is loaded so that the manipulation is always guaranteed to run.
$("#linktotoggle").click(function() {
// ^ Attach a click event to our link
$("#formtotoggle").toggle();
// ^ select the form and toggle its display
});
});
Hope it is enough, to get you started.