CODEWITHSUNDEEP
jqueryhtmlmenuhideshow
Josh
Josh

Reputation: 32

Hide/Show Divs using effects Jquery

i am trying to hide main div and show another, with jquery, i coded this, but its not working. this is the jquery and the css.

          <script>
 $(".mib").click(
function Mision() {
      var $next = $('#content #mision');
      var $active = $('#content .activec');
      $active.fadeOut(function(){
        $active.removeClass('activec');
        $next.fadeIn().addClass('activec');
            });   
          });

  </script>

<style>
#content div {
    display: none;
    position: relative;
    top: 0;
    left: 0;
}
#content div.activec {
    display: block;
}
</style>

and here is the html

<div id="menu">
<a href="" class="mib">Mision(actually here goes an image)</a>
</div>

<div id="content">
<div id="intro" class="activec">Intro Text</div>
<div id="mision">Mision Text</div>
</div>

I revised the code, and i still cant find the error.. Please help :)

Upvotes: 1

Views: 5462

Answers (4)

SHUNMUGA RAJ PRABAKARAN
SHUNMUGA RAJ PRABAKARAN

Reputation: 608

$(".mib").bind('click',function Mision() {
      var $next = $('#content #mision');
      var $active = $('#content .activec');
      $active.fadeOut(function(){
         $active.removeClass('activec');
         $next.fadeIn().addClass('activec');
      });   
   });

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47677

Keep it simple - http://jsfiddle.net/4KP5F/1/

$(".mib").on("click", function(e) {
    e.preventDefault();

    $("#intro").fadeOut(400, function() {
        $("#mision").fadeIn(400);
    });
});

Upvotes: 2

Engineer
Engineer

Reputation: 48803

Try this:

<a href="javascript:void(0)" class="mib">Mision(actually here goes an image)</a>

And encapsulate your script within ready callback:

$(document).ready(function(){
   $(".mib").click(function Mision() {
      var $next = $('#content #mision');
      var $active = $('#content .activec');
      $active.fadeOut(function(){
         $active.removeClass('activec');
         $next.fadeIn().addClass('activec');
      });   
   });
});

DEMO

Upvotes: 1

Dan
Dan

Reputation: 379

Try changing

$(".mib").click(
function Mision() {

To

$(".mib").click(
function() {

(Nevermind on the last edit, you have the right number of closing brackets.)

Upvotes: 0

Related Questions