Solved

jquery toggle div

Posted on 2011-03-15
7
519 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

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 A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…

632 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