So the script works, but it seems pretty long. I think there may be

Question

0

Asked: May 13, 20262026-05-13T13:02:01+00:00 2026-05-13T13:02:01+00:00

So the script works, but it seems pretty long. I think there may be

0

So the script works, but it seems pretty long. I think there may be some shortcuts I could take, maybe use an array? But I’m new at JS, and really new at jQuery.

What it does:

I have a list of ten questions, and I want to take a graphic (plus sign) and toggle it when clicked to a minus sign. It will also reveal the answer by using a slide toggle.

Here’s the code:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">                                         
   $(document).ready(function() {
   $(".divOne").hide();
   $(".divTwo").hide();
   $(".divThree").hide();
   $(".divFour").hide();
   $(".divFive").hide();
   $(".divSix").hide();
   $(".divSeven").hide();
   $(".divEight").hide();
   $(".divNine").hide();
   $(".divTen").hide();

    $(".bbone").click(function(){
     $(".divOne").slideToggle("slow");
     $("#button1").toggleClass("down");
     });

     $(".bbtwo").click(function(){
     $(".divTwo").slideToggle("slow");
     $("#button2").toggleClass("down");
     });

     $(".bbthree").click(function(){
     $(".divThree").slideToggle("slow");
     $("#button3").toggleClass("down");
     });

     $(".bbfour").click(function(){
     $(".divFour").slideToggle("slow");
     $("#button4").toggleClass("down");
     });

     $(".bbfive").click(function(){
     $(".divFive").slideToggle("slow");
     $("#button5").toggleClass("down");
     });

     $(".bbsix").click(function(){
     $(".divSix").slideToggle("slow");
     $("#button6").toggleClass("down");
     });

     $(".bbseven").click(function(){
     $(".divSeven").slideToggle("slow");
     $("#button7").toggleClass("down");
     });

     $(".bbeight").click(function(){
     $(".divEight").slideToggle("slow");
     $("#button8").toggleClass("down");
     });

     $(".bbnine").click(function(){
     $(".divNine").slideToggle("slow");
     $("#button9").toggleClass("down");
     });

     $(".bbten").click(function(){
     $(".divTen").slideToggle("slow");
     $("#button10").toggleClass("down");
     });

 });                                   
</script>

Here’s the CSS:

<style type="text/css">
body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.divOne, .divTwo, .divThree, .divFour, .divFive, .divSix, .divSeven, .divEight, .divNine, .divTen
{
border:1px solid #CC0000;
background-color:#efefef;
width:580px;
margin-top:5px;
font-size:10px;
padding:5px;
clear:left;
}
.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten
{
padding-left:10px;
text-decoration:none;
color:#CC0000;
font-variant:small-caps;
font-size:14px;
}
.bbone, .bbtwo, .bbthree, .bbfour, .bbfive, .bbsix,.bbseven,.bbeight,.bbnine,.bbten
{
vertical-align:middle;
}
.question
{
height:auto;
background-color:#fff;
margin-bottom:10px;
width:800px;
}
p {
margin:0;
padding:0;
float:left;
width:16px;
height:16px;
background-image:url(images/add.png);
background-repeat:no-repeat;       
    }

p.down {
float:left;
width:16px;
height:16px;
background-image:url(images/delete.png);
background-repeat:no-repeat;
    }

.wwwLink
{
padding-left:20px;
background: transparent url(images/world_go.png) no-repeat center left;
}
</style>

Here’s the HTML:

<body>
<div class="question">
<p id="button1" class="bbone">&nbsp;</p><a href="#" class="one">Myth No. 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. .&nbsp;</a><br/>
<div class="divOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. 
<a href="http://stackoverflow.com/questions/ask" class="wwwLink"  target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button2" class="bbtwo">&nbsp;</p><a href="#" class="two">Myth No. 2:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/> 
<a href="http://stackoverflow.com/questions/ask" class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button3" class="bbthree">&nbsp;</p><a href="#" class="three">Myth No. 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divThree">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button4" class="bbfour">&nbsp;</p><a href="#" class="four">Myth No. 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divFour">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button5" class="bbfive">&nbsp;</p><a href="#" class="five">Myth No. 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divFive">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.  <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button6" class="bbsix">&nbsp;</p><a href="#" class="six">Myth No. 6:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divSix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.  <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button7" class="bbseven">&nbsp;</p><a href="#" class="seven">Myth No. 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divSeven">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. 
</div>
</div>

<div class="question">
<p id="button8" class="bbeight">&nbsp;</p><a href="#" class="eight">Myth No. 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divEight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. 
</div>
</div>

<div class="question">
<p id="button9" class="bbnine">&nbsp;</p><a href="#" class="nine">Myth No. 9: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divNine">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.  <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>

<div class="question">
<p id="button10" class="bbten">&nbsp;</p><a href="#" class="ten">Myth No. 10: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a><br/>
<div class="divTen">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.  <br/><br/>
<a href="http://stackoverflow.com/questions/ask"  class="wwwLink" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
</div>
</div>
<body>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-13T13:02:01+00:00

Use this instead of any of the jQuery you posted:

$(document).ready(function() {
  $('div.question')
    .children('div').hide().end()
    .children('p').click(function(){
      $(this).toggleClass('down').next().slideToggle("slow");
    });
});

Also, you really should consolidate your classes. I would use this updated HTML pattern for all your questions:

<div class="question">
  <p class="button">&nbsp;<a href="#">Myth No. 2:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a></p>
  <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/> 
  <a href="http://stackoverflow.com/questions/ask" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
  </div>
</div>

Your CSS would follow this form:

.question       { }
.button         { } /* Instead of bbOne, bbTwo, etc*/
.question div   { } /* Instead of divOne, divTwo, etc */
.question div a { } /* Instead of wwwLink */

And then I would use this slightly updated jQuery:

$(document).ready(function() {
  $('div.question')
    .children('div').hide().end()
    .find('p > a').click(function(e){
      $(this)
        .parent().toggleClass('down')
        .next().slideToggle("slow");
      e.preventDefault();
    });
});

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

So the script works, but it seems pretty long. I think there may be

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply