Toggle hide/show между двумя divs jQuery

Я пытаюсь получить ссылку, которая будет переключать скрытие/шоу между двумя div. Ничего странного, и я видел много примеров, где это было сделано. Моя основная HTML структура выглядит следующим образом:Toggle hide/show между двумя divs jQuery

<div id="wrapper"> 
    <div id="tog_A"> 
    <div id="tog_B"> 
</div> 

<a href="#" id="link">Toggle</a>

И CSS:

#tog_A { 
    display:block; 
} 
#tog_A { 
    display:block; 
}

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

Существующие JavaScrip, что, как представляется, в конфликте:

//Load when dom ready 
jQuery(function() { 
// click listener for anchors 
jQuery(document).on("click",'a[href^="#"]', function(e) { 

// prevent click and side effects 
    e.preventDefault(); 

// do the scroll 
    jQuery('body, html').animate({ 
    scrollTop : jQuery(this.hash).offset().top 
    }); 

//change state of button 
var oldHash = jQuery(this.hash).attr("id").split("-"); 
var oldNr = parseInt(oldHash[1],10); 
var nrOfAllSections = jQuery('[id^="section-"]').length; 
var nr = oldNr == nrOfAllSections ? 1 : oldNr+1; 
if(oldNr == nrOfAllSections) { 
    jQuery(this).text("Top ▴"); 
    } else { 
    jQuery(this).text("Down ▾"); 
    } 
var newHash = "#"+oldHash[0]+"-"+ nr; 
jQuery(this).attr("href", newHash); 
}); 

jQuery(document).on('click', "#scrollToInfo", function(e) { 
    e.preventDefault(); 
    var nrOfAllSections = jQuery('[id^="section-"]').length; 
    var hrefHash = "#section-" + nrOfAllSections; 
    var ypos = jQuery(hrefHash).offset().top; 
    window.scrollTo(0, ypos); 
    jQuery('a#scrollToBottom').text("Top ▴").attr("href", "#section-1"); 
}); 

});

источник

2016-10-01 Torbjörn Hedberg

Я запутался, почему вам нужна помощь. * «Я видел много примеров, где это было сделано» * Почему бы просто не использовать эти примеры? Очевидно, это будет означать редактирование некоторых из них, чтобы они соответствовали вашему собственному исходному коду .... – NewToJS

Используйте этот метод

$("#link").click(function() { 
     if ($("#tog_A").is(":visible")) { 
     $("#tog_A").hide(); 
     $("#tog_B").show(); 
     } else { 
     $("#tog_B").hide(); 
     $("#tog_A").show(); 
     } 
    });

источник

2016-10-01 16:33:07

<head> 
<script> 
    var toggle = function() { 
    var mydiv = document.getElementById('tog_A'); 
    var mydiv2 = document.getElementById('tog_B'); 
    if (mydiv.style.display === 'none' || mydiv.style.display === '' ||  mydiv2.style.display === 'none' || mydiv2.style.display === '') 
    mydiv.style.display = 'block'; 
    mydiv2.style.display = 'block'; 

else 
    mydiv.style.display = 'none' 
    mydiv2.style.display= 'none' 
} 

</script> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="tog_A" style="display:none;"> 
    <div id="tog_B" style="display:none;" > 
</div> 

    <a href="#" onclick="toggle();" id="link">Toggle</a> 
<body>

источник

2016-10-01 16:51:03

Это работает на моем веб-сайте, я использую его для того, чтобы люди просматривали мой сайт на мобильных телефонах отлично. –

Toggle hide/show между двумя divs jQuery

ответ

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