Toggle DIV в Wordpress Страница

Question

У меня есть собственный шаблон Wordpress. Это, наверное, действительно глупый вопрос, но на странице (а не в должности) я хочу иметь 4 изображения, что при нажатии на них скрытые скрытые divs открываются, а затем закрываются, когда изображение снова нажимается.

У меня есть это в отдельном файле scripts.js (названный для правильно в файле шаблона footer.php - его там так, что страница загружается быстрее ...):

$(document).ready(function(){ 

$('#wd-click').click(function(){ 
    $('#wd-info').slideToggle(); 
}); 

$('#seo-click').click(function(){ 
    $('#seo-info').slideToggle(); 
}); 

$('#mobo-click').click(function(){ 
    $('#mobo-info').slideToggle(); 
}); 

$('#gd-click').click(function(){ 
    $('#gd-info').slideToggle(); 
}); 

});

И я это на странице:

<a href="javascript:void(0)" id="wd-show"><img class="size-full wp-image-93" alt="" src="image.jpg" width="750" height="75" /></a> 

<div class="info-div" id="wd-info" style="display: none;">...</div> 

Что мне не хватает?

Благодаря

Answer 1

Попробуйте это (потому что WordPress часто работает JQuery в no conflict mode и не использует $ в JQuery)

jQuery.noConflict() 
jQuery(document).ready(function(){ 
    (function($){ 
    $('#wd-click').click(function(){ 
     $('#wd-info').slideToggle(); 
    }); 

    $('#seo-click').click(function(){ 
     $('#seo-info').slideToggle(); 
    }); 

    $('#mobo-click').click(function(){ 
     $('#mobo-info').slideToggle(); 
    }); 

    $('#gd-click').click(function(){ 
     $('#gd-info').slideToggle(); 
    }); 
    })(jQuery); 
}); 

Demo

Answer 2

вы можете попробовать LightBox http://lokeshdhakar.com/projects/lightbox2/ или Twitter Bootstrap http://getbootstrap.com/javascript/#modals для этого, очень просто и быстро для развертывания

Answer 3

Добавление события нажатия на # Wd-клик, но ваша ссылка идентифицируется # Wd-шоу

Answer 4

его там так страница загружается быстрее ...):

Вы можете сократить код и это уменьшит страницу размера, хотя это будет иметь очень небольшое влияние.

$(document).ready(function(){ 
    $('#wd-click').click(function(){ 
     $('#' + this.id.split('-')[0] + '-info').slideToggle(); 
    }); 
}) 

Answer 5

Хорошо у меня есть очень универсальное решение для вас, что это постное и значит на сценарии: р

Вы можете добавить идентификатор для каждого без изменения JQuery, если они имеют разные размеры и такие.

Это может использоваться с любым элементом, пока вы меняете класс, который он выбирает.

HTML

<div class="imageSlide"> 
    <span class="hidden">I'm a hidden image! :D</span> 
</div> 
<div class="imageSlide"> 
    <span class="hidden">I'm a hidden image! :D</span> 
</div> 
<div class="imageSlide"> 
    <span class="hidden">I'm a hidden image! :D</span> 
</div> 
<div class="imageSlide"> 
    <span class="hidden">I'm a hidden image! :D</span> 
</div> 

JQuery

$('.imageSlide').on('click', function() { 
    $(this).children().stop(true).slideToggle('1000'); 
}); 

CSS

.imageSlide { 
    width: 200px; 
    height: 200px; 
    background: mediumSeaGreen; 
    float: left; 
    margin-left: 10px; 
    position: relative; 
} 

.imageSlide > span { 
    display: none; 
    position: absolute; 
    bottom: 0; 
} 

jsfiddle to above code

JSfiddle с точными потребностями (я надеюсь)

CSS

#img1 { 
    background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/web-design.png); 
    margin-bottom: 1px; 
    width: 750px; 
    height: 75px; 
    border: 1px solid #000; 
    border-radius: 5px; 
} 

#img2 { 
    background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/seo.png); 
    margin-bottom: 1px; 
    width: 750px; 
    height: 75px; 
    border: 1px solid #000; 
    border-radius: 5px; 
} 

#img3 { 
    background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/mobo.png); 
    margin-bottom: 1px; 
    width: 750px; 
    height: 75px; 
    border: 1px solid #000; 
    border-radius: 5px; 
} 

#img4 { 
    background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/graphic-design.png); 
    margin-bottom: 1px; 
    width: 750px; 
    height: 75px; 
    border: 1px solid #000; 
    border-radius: 5px; 
} 

.info-div { 
    position: relative; 
    bottom: 0; 
    width: 980px; 
    padding: 10px; 
    border: 1px dotted #CCC; 
    background: #DFE9E7; 
    margin: 30px 0; 
    border-radius: 10px; 
    display: none; 
} 

jsfiddle for OP's needs (Новейший ссылка)

Another variation I used on one of my portfolios.