debbieau1
asked on
jquery toggle div
I was wanting some help to streamline this code. This works but is too long.
I have set it up 3 times, but I know it can be shortened. I want to expand the div when heading is clicked. I want to dynamically create it and want to reduce the amount of code used.
<script type="text/javascript">
$('#showhowto').hide();
$('#showprobs').hide();
$(function(showbeg){
$('#showBasics').click(fun ction() {
$('#showbeg').toggle(400);
return false;
});
});
$(function(showHowTo){
$('#showHowTo').click(func tion() {
$('#showhowto').toggle(400 );
return false;
});
});
$(function(showProbs){
$('#showProbs').click(func tion() {
$('#showprobs').toggle(400 );
return false;
});
});
</script>
I want to do what this code does, but have it more generic to be used several times.
Help on how to improve this and make it generic would be great.
I have set it up 3 times, but I know it can be shortened. I want to expand the div when heading is clicked. I want to dynamically create it and want to reduce the amount of code used.
<script type="text/javascript">
$('#showhowto').hide();
$('#showprobs').hide();
$(function(showbeg){
$('#showBasics').click(fun
$('#showbeg').toggle(400);
return false;
});
});
$(function(showHowTo){
$('#showHowTo').click(func
$('#showhowto').toggle(400
return false;
});
});
$(function(showProbs){
$('#showProbs').click(func
$('#showprobs').toggle(400
return false;
});
});
</script>
I want to do what this code does, but have it more generic to be used several times.
Help on how to improve this and make it generic would be great.
it will be helpful, if you can share the html structure also. and the information on what needs to get toggled at which click event
ASKER
<a href="#" id="showBasics" style="outline:none">
This is the basics heading
</a>
<div id="showbeg">
<p> How to get the help you need</p>
<p>Blah blah blah</p>
<p> Learning the basics</p></div>
This is the basics heading
</a>
<div id="showbeg">
<p> How to get the help you need</p>
<p>Blah blah blah</p>
<p> Learning the basics</p></div>
ASKER
there will be several headings that can be clicked and toggled on/off to expand/show the div it is on at the time. thanks for your help
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Heaps better. Thanks!
thanks for the points :)
But please remember in future, that you need to add the correct zones.
For this question, it should have been
Jquery, Javascript, HTML
But please remember in future, that you need to add the correct zones.
For this question, it should have been
Jquery, Javascript, HTML
ASKER
Thanks for that, I thought I had, but will watch that in the future.