Как сделать такой значек в блоке меню ?

это простые картинки. какие поставите, такие и будут

Я в коде у них картинки не нашел, с css не дружу честно говоря.

Вот это для минуса прописано в коде

это для плюса

Ну если коротко, то

HTML

<ul class"menu">

	<li><span data-list="list1">+</span><a href="#">Пункт меню 1</a>

		<ul id="list1">

			<li><a href="#">Пункт меню 1.1</a></li>

			<li><a href="#">Пункт меню 1.2</a></li>

			<li><a href="#">Пункт меню 1.3</a></li>

			<li><a href="#">Пункт меню 1.4</a></li>

		</ul>

	</li>

	<li><span data-list="list2">+</span><a href="#">Пункт меню 2</a>

		<ul id="list2">

			<li><a href="#">Пункт меню 2.1</a></li>

			<li><a href="#">Пункт меню 2.2</a></li>

			<li><a href="#">Пункт меню 2.3</a></li>

			<li><a href="#">Пункт меню 2.4</a></li>

		</ul>

	</li>

</ul>

CSS

ul.menu ul{

	display:none;

}

JS

$('ul.menu li span').on('click', function(e){

	$('ul#' + $(this).data('list')).toggle();

	e.preventDefault();

});

Необходимa либа jQuery

В верстке разберетесь?

colorito, я нашел нужные куски кода у них. Плюс то что вы написали, завтра попробую скомбинировать.

Можно обратиться если не будет получаться?

Спасибо

зы вижу у вас не исконка + и -, а у них значки в png. При нажатии класс меняется на противоположный...соответственно подгружается другой значек.

Реализация и пример того,что вам нужно есть здесь. Используется jQuery, HTML, CSS.

Нашел полный код. Конечно не все понятно, особенно в js

css

.catalog-menu a.section-image.plus{
	background: url('/img/znakplus.jpg') no-repeat left top;
}
.catalog-menu a.section-image.minus{
	background: url('/img/znakminus.jpg') no-repeat left top;
}

js

$(document).ready(function(){
	//var menu = $('.');
	
	$('a.section-image').live('click', function(event) {
		var _this = $(this);
		
		var id = _this.attr('id').replace('s-img-','');
		var href = "/catalog/getSection.php?SECTION_ID="+id+'&math='+Math.random();
		var blockIn = _this.closest('.p-menu')
		var oldAjax = blockIn.parent().find('#_ttt'+id);
		var isAjax = oldAjax.hasClass('ajax');

		if (_this.hasClass('plus')){
			_this
				.removeClass('plus')
				.addClass('minus');
			//ajax
			if (!isAjax){
				blockIn.after('<span id="load" style="color:#999;padding-left:13px;">Загрузка...</span>')
				$.get(href).success(function(results){
					var ajaxBlock = ($(results).find('.ajax'));
						ajaxBlock.css('padding-left','11px');
						ajaxBlock.css('display','none');
						blockIn.after(ajaxBlock);
						$('#load').remove();
						ajaxBlock.slideDown(500);
				});
			}else{
				oldAjax.slideDown(500);
			}
		}else 
			if (_this.hasClass('minus')){
				if (_this.attr('href')==='/catalog/'){
					return true;
				}
				_this
					.removeClass('minus')
					.addClass('plus')
					.addClass('ajax');
			//Если текущая секция открыта
			oldAjax.slideUp(500);
		}
		event.preventDefault();
	});
});

Спасибо. Ваш пример намного короче по количеству кода, чем тот который я нашел на интересующем меня сайте. Странно. Завтра буду плотно разбираться.

Да и один ньюанс. В вашем примере нет перехода в страницу вопроса, а только раскрывается ответ. Т.е. я то буду ещё делать сам вопрос ссылкой на отдельный документ. Раскрываться список должен только при нажатии по значку.

А, вон оно чего, михалыч. )) Честно говоря не знаю, как с этим разобраться.

Почти сделал, одна проблема осталась

Если РАЗДЕЛ 1 обернуть в <a href>Раздел1</a> то не работает

а так работает

1. список раскрывается

2. класс меняется на минус и цвет плюсика становится красным, ну а уж подгрузку минусика вместо плюсика сделаю

 

<div class="bolchetexta"><span class="chitatdalee plus">+</span>

     РАЗДЕЛ 1

     <div class="razvorot">

         <li><a href="">категория 1</a></li>

         <li><a href="">категория 2</a></li>

         <li><a href="">категория 3</a></li>

    </div></div>

js

$(".bolchetexta .razvorot").hide();

	$(".bolchetexta .chitatdalee").click(function(){

        var _this = $(this);

        $(this).next(".razvorot").slideToggle("slow")

       

 if (_this.hasClass('plus')){

			_this

				.removeClass('plus')

				.addClass('minus');

    };