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.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!