-1

I'm new in javascript and I found this sample code :

HTML :

<div id="newpost">
  Test text
</div>

<button id='button'>Click</button>

JavaScript :

var button = document.getElementById('button');

button.onclick = function() {
var div = document.getElementById('newpost');
   if (div.style.display !== 'none') {
      div.style.display = 'none';
     }
   else {
    div.style.display = 'block';
        }
   };

Demo : http://jsfiddle.net/andrewwhitaker/hefGK/

My question is : how can I add some effects to this code ?

shm
  • 439
  • 2
  • 11
  • 25
  • really, I don't know jquery and I don't know how use it . Because I tested some jquery codes and it not worked :/ – shm Dec 11 '15 at 08:15

1 Answers1

0

In the head of your html file you get the jquery just like you do with the js file.

<head>
<script src="jquery-1.11.3.min.js"></script>
<script src="myjs"></script>
</head>

JQuery has a very simple way to fade in and out any element

$( "#newpost" ).fadeIn( "slow", function() {
    // Animation complete
});
StijnvanGaal
  • 441
  • 3
  • 17
  • Thank you , I use `Razor engine` and my view has `layout` . where should I place jquery codes ? – shm Dec 11 '15 at 09:06
  • Where do you assign your own script? i know the razor engine from asp.net, if you are using that, JQuery is probably already assigned and you can just start using it. If not you should assign it like i showed in the head of your template, or entirely at the bottom of your footer. But make sure JQuery gets assigned BEFORE you use any other script. Else those script won't be able to use JQuery. – StijnvanGaal Dec 11 '15 at 09:10
  • I checked everything you said and I put your code everywhere you think , but it didn't work yet . – shm Dec 11 '15 at 09:24
  • Can you show how you add your own script, or is that automatically done? and do you get any error in your script? – StijnvanGaal Dec 11 '15 at 09:26
  • yes , sure . This is some of my codes http://jsfiddle.net/L9yfgL7x/ , Sorry for take your time – shm Dec 11 '15 at 09:36
  • As you can see in the body there is a line of code `@Scripts.Render("~/bundles/jquery")`. this means JQuery is alredy implemented – StijnvanGaal Dec 11 '15 at 09:39