Solved

jquery toggle div

Posted on 2011-03-15
7
516 Views
Last Modified: 2012-05-11
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(function() {
                  $('#showbeg').toggle(400);
                  return false;
            });
      });
            $(function(showHowTo){
            $('#showHowTo').click(function() {
                  $('#showhowto').toggle(400);
                  return false;
            });
      });
                        $(function(showProbs){
            $('#showProbs').click(function() {
                  $('#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.
0
Comment
Question by:debbieau1
  • 4
  • 3
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35144734
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

0
 
LVL 1

Author Comment

by:debbieau1
ID: 35144749
<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>
0
 
LVL 1

Author Comment

by:debbieau1
ID: 35144753
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
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 35144768
i guess assigning classes to them will be more scalable in terms of code :)

 <a href="#" id="showBasics" style="outline:none" class="heading">
This is the basics heading
</a>

<div id="showbeg" class="content">
<p> How to get the help you need</p>
<p>Blah blah blah</p>
<p> Learning the basics</p></div>

 $(function(){
            $('.heading').click(function() {
                  $(this).next(".content").toggle(400);
            });
      });
0
 
LVL 1

Author Closing Comment

by:debbieau1
ID: 35144827
Heaps better.  Thanks!
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35144835
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
0
 
LVL 1

Author Comment

by:debbieau1
ID: 35144844
Thanks for that, I thought I had, but will watch that in the future.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question