style.display = "none"

[pavdin]

Привет всем гуру JS!

Обращаюсь за помощью, для тех кто знает жабу, ответ найдет за 5 минут
Я сам программист php, но "Жабу" знаю, на уровне "Методом тыка и интуиции)))))". А в синтаксисе вообще не бум бум. Выучить руки не доходят. Поэтому обращаюсь к Вам за помощью. Задача простая.

НА сайте есть скрытый блок, display = "none"
И есть кнопки показать и скрыть. По умолчанию блок скрыт.

Все работает, вроде как надо.

1. Задача: как сделать наоборот. Т.е. по умолчанию блок показывается, а при клике скрывается.
2. Как сделать, что бы выбор юзера запоминался, даже при обновлении страницы.

Что бы было понятнее, ниже привожу листинг. Кто сможет помочь советом, буду весьма благодарен.

САМ СКРИПТ

<script>
	
	$(document).ready(function(){
		
		mode = "compact";
		
		$("#img_compact").click(function(){
			
			if(mode == "detail") {
				
				document.getElementById("img_compact").src = "/images/category_compact_active.png";
				document.getElementById("img_detail").src = "/images/category_detail_deactive.png";
				document.getElementById("section_list_1").style.display = "block";
				document.getElementById("section_list_2").style.display = "none";
				mode = "compact";
				
			}
		
		});
		
		$("#img_detail").click(function(){
			
			if(mode == "compact") {
				
				document.getElementById("img_detail").src = "/images/category_detail_active.png";
				document.getElementById("img_compact").src = "/images/category_compact_deactive.png";
				document.getElementById("section_list_2").style.display = "block";
				document.getElementById("section_list_1").style.display = "none";
				mode = "detail";
				
			}
		
		});
		
	});	
</script>

[pavdin]

Пытался гуглить
нашёл что то типо
сохранить или зафиксировать состояние tab элемента JS $.cookie
Но к сожалению знаний самому не хватило.

[ОлегА]

1.

function show_hide(elem){

   if( $(elem).css('display') == 'none' ){
         $(elem).show();
   } else {
         $(elem).hide();
   }

}

<div onclick="show_hide(this)">blablabla</div>

2. записывать в куку, но это можно и с пхп сделать, зачем вам скрипт?

[pavdin]

function show_hide(elem){

   if( $(elem).css('display') == 'none' ){
         $(elem).show();
   } else {
         $(elem).hide();
   }

}

1. Вы мне дали кусочек кода. Вернее вообще новую функцию.
Вы можете помочь с вышеописанным листингом? Та нужно просто чучуть подправить код, сделать по умолчанию показ а не скрытие.

2. Мне нужно именно на js. Hа php не подходит. И потом на лету не получиться записать на php такую куку. Страница будет перезагружаться. Понимаете?

[ОлегА]

сделать по умолчанию показ а не скрытие

- этот код работает именно по умолчанию на показ

1. в вашем вопросе не было сказано, что нужно как то исправить ваш код была задан вопрос был написан ответ.
2. и вообще если вы используете jQuery то не надо от него отходить, я про код внутри click

попробуйте так :

<script>
	
	$(document).ready(function(){
		var mode = "compact";
		
                $('#section_list_1').css('display','block');
		
		$("#img_compact").click(function(){
			
			if(mode == "detail") {
				
				$("#img_compact").attr('src', '/images/category_compact_active.png');
				$("#img_detail").attr('src', '/images/category_detail_deactive.png');
                                $('#section_list_1').css('display','none');
                                $('#section_list_2').css('display','block');
				mode = "compact";
				
			}
		
		});
		
		$("#img_detail").click(function(){
			
			if(mode == "compact") {
				
				$("#img_detail").attr('src', '/images/category_detail_active.png');
				$("#img_compact").attr('src', '/images/category_compact_deactive.png');
				$('#section_list_2').css('display','none');
                                $('#section_list_1').css('display','block');
				mode = "detail";
				
			}
		
		});
		
	});	
</script>

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

[pavdin]

ПОЖАЛУЙСТА Помогите со скриптом


Я описал более подробно.
Да, Ваш пример что дали не помог.