[SOLVED] Hide product description initially but show when mouse click on 'More info'

[CLance]

My given task is

 

in product page, hide product description initially, but when mouse click on 'More info', the full description is showed.

 

My webpage: http://eviewtrading.com/denmall/home/8-product1.html

 

Any ways to make this happen?

Edited January 20, 2014 by Lance Chan (see edit history)

[shailendra]

In product.tpl file

add this code

<script type="text/javascript">
$(document).ready(function(){
	$("#more_info_sheets").hide();
	$("a#more_info_tab_more_info").click(function(){
		$("#more_info_sheets").show();
	});
});
</script>

[vekia]

i will hide #more_info_sheets with css

it's due to the fact that with js scripts #more_info_sheets will disappear after full page load, so you will probably see it, and then it will disappear.

[CLance]

Thanks Shailendra, it works perfectly.
How if I want it be hide again if i click on "More info" again?

<script type="text/javascript">
$(document).ready(function(){
	$("#more_info_sheets").hide();
	$("a#more_info_tab_more_info").click(function(){
		$("#more_info_sheets").show();
	});
        $("a#more_info_tab_more_info").click(function(){
		$("#more_info_sheets").hide();
	});
});
</script>

I made this, not work~

[shailendra]

use this Modified script

<script type="text/javascript">
$(document).ready(function(){
	$("#more_info_sheets").hide();
	$("a#more_info_tab_more_info").click(function(){
		$("#more_info_sheets").toggle();
	});
});
</script>

Also as vekia suggested above,you should hide your div having id=more_info_sheets with css display:none initially which will hide your div during page load(for better user experience) instead of after complete page loading.In that case you don't need to add the line $("#more_info_sheets").hide();

[CLance]

Thanks Shailendra and Vekia for explanation, now I understand what Vekia mean...

So I should add

#more_info_sheets {
	display:none;
}

into Themes -> default -> css -> product.css              in any line, to perform this, am I correct?

[shailendra]

Thanks Shailendra and Vekia for explanation, now I understand what Vekia mean...

 

So I should add

#more_info_sheets {
	display:none;
}

into Themes -> default -> css -> product.css              in any line, to perform this, am I correct?

rather than using this in product.css, you may use inline css so that it will take higher precedence than any other css applied on the same element. so apply this css in product.tpl

<div id="more_info_sheets" class="sheets align_justify" style="display:none;">

and the final script would be

<script type="text/javascript">
$(document).ready(function(){
	$("a#more_info_tab_more_info").click(function(){
		$("#more_info_sheets").toggle();
	});
});
</script>

[CLance]

It is work! Thank you!

[prashant kumar singh]

<script type="text/javascript">
$(document).ready(function(){
    $("#more_info_sheets").hide();
    $("a#more_info_tab_more_info").click(function(){
        $("#more_info_sheets").toggle();
    });
});
</script>

 

 

where should i put this code

can anyone suggest me