Скрыть/показать div toggle

У меня есть следующая надпись с базовыми и расширенными поисковыми div.Скрыть/показать div toggle

<div class="form"> 
    <form> 
     <input type="text" name="first_name"> 
     <input type="text" name="last_name"> 

     <div id="Basic" class="slide"> 
     <input type="text" name="location"> 
     </div> 

     <a onclick="ShowDiv('Adv');">+ show advanced fields</a> 

     <div id="Adv" class="slide hidden"> 
     <input type="text" name="first_name2"> 
     <input type="text" name="last_name2"> 
     <input type="text" name="street"> 
     <input type="text" name="town"> 
     <input type="text" name="country"> 
     </div> 
    </form> 

    <a onclick="ShowDiv('Basic');">- hide advanced fields</a> 
    </div>

тумблер достигается с помощью следующего сценария

function HideDiv() { 
     $('.slide').hide(); 
    } 
    function ShowDiv(ctrl) { 
     HideDiv(); 
     $('#' + ctrl).show(); 
    } 
    ShowDiv('Basic');

У меня также есть trhe следующего JQuery в месте, которое показывает ADV DIV, если пользователь возвращается на страницу со страницы результатов, предполагая, что он завершил любой поля ввода из формы поиска изначально

//show adv div based on input value data 
$(function(){ 
    if($("#Adv input[value!='']").length) 
     $('#Adv').show(); // if this is the element you want to show. 
});

Мне нужно устранить необходимость использования обеих ссылок. Мне нужно иметь только одну ссылку в зависимости от состояния. Таким образом, если базовый div показан по умолчанию, ссылка будет показывать, что шоу продвинуто. Когда отображается продвинутый, привязка привязки должна переключаться, чтобы скрыть продвинутый

Как мне отредактировать мой jQuery и пометить.

источник

2012-03-23 gek

$(function(){ 
    $(".toggler").click(function(e) { 
     e.preventDefault(); 
     $(this).find("span").toggle(); 
     $(".togglee").slideToggle(); 
    }); 

    //show adv div based on input value data 
    if($("#Adv input[value!='']").length) { 
     $('.toggler').click(); // if this is the element you want to show. 
    } 

});

И HTML:

<html> 
    <body> 
     <div class="form"> 
      <form> 
       <input type="text" name="first_name"> 
       <input type="text" name="last_name"> 

       <div class="Basic togglee" class="slide"> 
        <input type="text" name="location"> 
       </div> 

       <div id="Adv" class="slide hidden togglee"> 
        <input type="text" name="first_name2"> 
        <input type="text" name="last_name2"> 
        <input type="text" name="street"> 
        <input type="text" name="town"> 
        <input type="text" name="country"> 
       </div> 
      </form> 

      <a class="toggle-link toggler"> 
       <span>+ show advanced fields</span> 
       <span class="hidden">- hide advanced fields</span> 
      </a> 

     </div> 
    </body> 
</html>

jsFiddle пример here.

источник

2012-03-23 11:31:00 bububaba

Мне это нравится. Но он не расширяется в IE9 – gek

Странно, без ракеты. Любые сообщения об ошибках? У меня только IE8, поэтому я не могу проверить. – bububaba

Я думаю, что теперь это работает, спасибо, может быть, это проблема с кешем. – gek

HTML

<a class="toggle-link" href="#Adv" >toggle advanced fields</a>

$('.toggle-link').on('click.toggle', function(evt) { 
    var tgt = $($(this).attr('href')); /* tgt = $("#Adv") */ 
    evt.preventDefault(); 

    if (tgt.length) { /* if $("#Adv") exists */ 
     $(this).toggleClass(".expanded"); /* add or remove this class for the link */ 
     tgt.toggleClass(".hidden"); /* add or remove this class in the target element */ 
    } 
});

CSS

.toggle-link:before { content: "+"; padding-right: 1em; } 
.toggle-link.expanded:before { content: "-"; }

в этом примере, информация об элементе, чтобы скрыть/показать передается вместе с href атрибутом, и обработчик событий не является встроенным, поэтому вы можете избежать вызова одной и той же функции несколько раз, смешивая java сценарий и разметку вместе.

Смотрите пример скрипку: http://jsfiddle.net/SnKHg/

источник

2012-03-23 11:24:55 fcalderan

То, что в значительной степени то, что я ищу. Мне нравится, но не переключается на данный момент – gek

см. Мое обновление со скрипкой :) – fcalderan

Не знаю, почему он не работает на моей странице. Попытка увидеть любые существующие сценарии, которые могут быть конфликтом. Мне очень нравится, что ваше решение – gek

Эта функция может сделать лучше конечно, но это один из способов сделать это.

Сделать ссылку <a href="#" class="show adv">Click</a>.

Функция jQuery переключает класс, таким образом, функциональность.

$('a.show').click(function(e) { 
    e.preventDefault(); 
    if($(this).hasClass('basic')) 
    { 
     ('#adv').hide(); 
     ('#basic').show(); 
     $(this).addClass('adv'); 
     $(this).removeClass('basic'); 
    } 
    else if($(this).hasClass('adv')) 
    { 
     ('#basic').hide(); 
     ('#adv').show(); 
     $(this).addClass('basic'); 
     $(this).removeClass('adv'); 
    }   
});

Но аккордеон JQuery UI лучше для этого, особенно если у вас есть несколько контейнеров, которые вы хотите, чтобы показать/скрыть.

источник

2012-03-23 11:25:10

Вы могли бы сделать

$("a.toggle").click(function() { 
    $(this).closest('div.form').find("#Adv").toggle(); 
    $(this).toggleClass("hide"); 
    if ($(this).hasClass("hide")) { 
     $(this).text("hide advanced fields"); 
    } else { 
     $(this).text("show advanced fields"); 
    } 


});

HTML

<div class="form"> 
<form> 
    <input type="text" name="first_name"> 
    <input type="text" name="last_name"> 

    <div class="Basic" class="slide"> 
    <input type="text" name="location"> 
    </div> 

    <div id="Adv" class="slide hidden"> 
    <input type="text" name="first_name2"> 
    <input type="text" name="last_name2"> 
    <input type="text" name="street"> 
    <input type="text" name="town"> 
    <input type="text" name="country" value="gh"> 
    </div> 
</form> 

<a class='toggle'>show advanced fields</a> 
</div>

скрипку здесь http://jsfiddle.net/c27dW/

источник

2012-03-23 11:26:40

Найти ниже.

<div class="form"> 
    <form> 
     <input type="text" name="first_name"> 
     <input type="text" name="last_name"> 

     <div class="Basic" class="slide"> 
     <input type="text" name="location"> 
     </div> 

     <a class="toggle-link" onclick="ShowHideDiv();" id='bttn'>+ show advanced fields</a> 

     <div id="Adv" class="slide hidden"> 
     <input type="text" name="first_name2"> 
     <input type="text" name="last_name2"> 
     <input type="text" name="street"> 
     <input type="text" name="town"> 
     <input type="text" name="country"> 
     </div> 
    </form> 


    </div>

Я также модифицировал часть javascript.

function Hide() { 
      $('.slide').hide(); 
     } 

    function Show() { 

     $('.slide').show(); 
    } 
     function ShowHideDiv() { 

      var str = $("#bttn").text(); 
      if(str === '+ show advanced fields'){ 

      $("#bttn").text('- hide advanced fields'); 
      Show(); 

      } 
      else { 
       $("#bttn").text('+ show advanced fields'); 
      Hide(); 

      } 

     }

источник

2012-03-23 11:32:07 scartag

в дополнении к другому ответу, может быть, если и хотят, чтобы некоторые анимации, то и должны смотреть на этой http://jqueryui.com/demos/toggle/#option-options

источник

2012-03-23 11:33:35 cjmling

Скрыть/показать div toggle

ответ

Смежные вопросы