Отправка формы с использованием JQuery $ .ajax - изменить вид формы

Question

Я это пример моего списка форм на моей странице: http://jsfiddle.net/GSC3x/

Он отлично работает, но когда у меня есть много элементов списка на моей странице , это совсем не удобно. Я хочу изменить способ отображения форм после нажатия на один из элементов списка.

Я хочу, чтобы это произошло, когда я нажимаю на элемент, форма отображается в центре страницы, а остальные элементы списка невидимы, когда форма включена - когда я нажимаю на мой ранее щелкнутый элемент снова - он должен вернуться в обычное представление списка - как это сделать?

@@ UPDATE - добавлено гипер профессиональное изображение, чтобы показать, как оно должно работать! :]

Answer 1

Try ниже моего кода ...

CSS добавьте ниже

ul{ 
    position:relative; 
} 

.centerDiv{ 
    position:absolute; 
    z-index:1000; 
    top:0px; 
    left:30px; 
}​ 

и Javascript

$(document).ready(function(){ 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').click(function(e){ 
     if($(e.target).next(".slidingDiv").css('display') != 'block'){ 
      $(".slidingDiv").hide(); 
      $(".show_hide").hide(); 
      $(e.target).show(); 
      $(e.target).next(".slidingDiv").addClass("centerDiv"); 
      $(e.target).next(".slidingDiv").slideToggle(); 
     }else{ 
       $(".slidingDiv").hide(); 
       $(".show_hide").show(); 
     } 
    }); 
}); 

Answer 2

$(document).ready(function(){ 

     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 

     $('.show_hide').click(function(e){ 
      $('.show_hide').not($(this)).next(".slidingDiv").hide(); 
      $(e.target).next(".slidingDiv").slideToggle(); 
     }); 
}); 

Answer 3

Вместо $(e.target).next(".slidingDiv").slideToggle(); вы можете добавить код для анимации формы в центр.

var t=($(window).height() - $(this).next(".slidingDiv").height()) /2+$(window).scrollTop(); 
var l= ($(window).width() - $(this).next(".slidingDiv").width())/2+$(window).scrollLeft();   
$(e.target).next(".slidingDiv").css('position','absolute'); 
$(e.target).next(".slidingDiv").animate({ 
left: l, 
top: t, 
}, 500).show(); 
});