Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 522
  • Last Modified:

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(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
debbieau1
Asked:
debbieau1
  • 4
  • 3
1 Solution
 
Gurvinder Pal SinghCommented:
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
 
debbieau1Author Commented:
<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
 
debbieau1Author Commented:
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!

 
Gurvinder Pal SinghCommented:
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
 
debbieau1Author Commented:
Heaps better.  Thanks!
0
 
Gurvinder Pal SinghCommented:
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
 
debbieau1Author Commented:
Thanks for that, I thought I had, but will watch that in the future.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now