Solved

jquery toggle div

Posted on 2011-03-15
7
511 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
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 …
In this video I am going to show you how to back up and restore Office 365 mailboxes using CodeTwo Backup for Office 365. Learn more about the tool used in this video here: http://www.codetwo.com/backup-for-office-365/ (http://www.codetwo.com/ba…
Hi friends,  in this video  I'll show you how new windows 10 user can learn the using of windows 10. Thank you.

867 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

19 Experts available now in Live!

Get 1:1 Help Now