CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brigitte Fellner
Brigitte Fellner

Reputation: 255

how to simplify a toggle function with many divs

on my Website I have a page with FAQs. There are many questions, that I want to hide until someone clicks on the question, then the answer should appear. I already have a solution, I just have the feeling this solution is way to complicated. I just don't find a solution how to make it easier. Do you have any suggestions? See the code below, I hope it is self-explaining - if not just let me know ;-)

<script>
            $(document).ready(function() {
                for (var i = 1; i < 11; i++) {
                    answer = document.getElementById("answer" + i);
                    $(answer).hide();
                }
                question1 = document.getElementById("question1");
                question2 = document.getElementById("question2");
                question3 = document.getElementById("question3");
                question4 = document.getElementById("question4");
                question5 = document.getElementById("question5");

                answer1 = document.getElementById("answer1");
                answer2 = document.getElementById("answer2");
                answer3 = document.getElementById("answer3");
                answer4 = document.getElementById("answer4");
                answer5 = document.getElementById("answer5");

                $(question1).click(function() {
                    $(answer1).toggle();
                });
                $(question2).click(function() {
                    $(answer2).toggle();
                });
                $(question3).click(function() {
                    $(answer3).toggle();
                });
                $(question4).click(function() {
                    $(answer4).toggle();
                });
                $(question5).click(function() {
                    $(answer5).toggle();
                });
            });
        </script>

Upvotes: 1

Views: 126

Answers (7)

Surender
Surender

Reputation: 757

use of structured html and css classes will make this really simple 

$(document).ready(function(){
    $('.answer').hide();
    $('.question').click(function(){ 
    var holder = $(this).closest('.qaholder');
        $('.answer',holder).toggle();
    });
});

check out the structure at http://jsfiddle.net/yCYFT/

Upvotes: 1

jcubic
jcubic

Reputation: 66560

Try:

for (var i = 1; i < 11; i++) {
    (function(answer) {
        $("#question" + i).click(function() {
            answer.toggle();
        });
    })($("#answer" + i).hide());
}

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You could try this code:

$(function() {  
   $('h3[id^="question"]').on('click', function() {
      $(this).next('div').toggle();
   });    
});

As a sidenote, you could initially hide the answers simply using css if you use html5 boilerplate, e.g.

div[id^="answer"] {
   display: none;
}

.no-js div[id^="answer"] {
   display: block;
}

where .no-js is the class defined for the html element and removed with a script (e.g. modernizr)

Upvotes: 3

callmehiphop
callmehiphop

Reputation: 646

This looks like a job for regular expressions!

You can target all of the questions using a regular expression CSS selector, then grab the index from the id and use it to target the appropriate answer.

$('[id^="answer"]').hide();

$('[id^="question"]').click(function() {
  var index = this.id.replace('question', '');
  $('#answer' + index).toggle();
});

Tested this code with the following example http://jsfiddle.net/B6CBq/1/

Upvotes: 1

Saranya Sadhasivam
Saranya Sadhasivam

Reputation: 1294

Give the html as below

<h3><a href="#" onclick="faq_toggle('faq_150');">What is the purpose of site?</a>
<p id="faq_150" style="display: none;">The site to tell about wordpress</p>

Javascript function is below

function faq_toggle(id) {
        var e = document.getElementById(id);
    e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}

Or

function faq_toggle(id) {
        $('#'+id).toggle();
}

Upvotes: 0

Sirko
Sirko

Reputation: 74076

You could, for example, rewrite like this:

$(document).ready(function() {
  for (var i = 1; i < 11; i++) {
    $( '#answer' + i).hide();

    (function( index ) {
      $( '#question' + index ).click( function(){
         $( '#answer' + index ).toggle();
      });
    })( i );
  }
});
  1. you are already using jQuery, so skip the document.getElementById() and use the jQuery selector here.
  2. You are repeating the same code over and over again. Move it to the loop.

Upvotes: 2

Vishy
Vishy

Reputation: 1362

Write a common function which accepts ID of the question. Call this method inside onclick. Put the question in span/div and inside the function get the element inside function and call toggle.

Upvotes: 0

Related Questions