Solved

jquery toggle div

Posted on 2011-03-15
7
504 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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now