- "Queries about Javascript answered with a drop-down twist

Question

- "Queries about Javascript answered with a drop-down twist

Having some trouble with setting up a straightforward FAQ dropdown feature. Could someone lend a hand and see what might be going wrong?

Appreciate your help!

CSS

#faqs h3    { cursor:pointer; }
#faqs h3.active { color:#d74646; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p { padding:0; margin-bottom:15px; }

JavaScript:

$(document).ready(function() {
    $('#faqs h3').each(function() {
        var tis = $(this), 
            state = false, 
            answer = tis.next('div')
                        .hide()
                        .css('height','auto')
                        .slideUp();

            tis.click(function() {
                state = !state;
                answer.slideToggle(state);
                tis.toggleClass('active',state);
            });
    });
});

HTML

<div id="faqs">
    <h3>Question 1:</h3>
        <div>
            <p>Answer to Question 1.</p>
        </div>
    <h3>Question 2:</h3>
        <div>
            <p>Answer to Question 2.</p>
        </div>
</div>

javascript html css drop-down-menu

Answer 1

Answer №1

If you're looking for the necessary functions, check out the following:

HTML

<div id="QA">
  <ul>
    <li>Question 1</li>
    <li>Answer 1</li>
    <li>Question 2</li>
    <li>Answer 2</li>
  </ul>
  <ul>
    <li>Question 3</li>
    <li>Answer 3</li>
    <li>Question 4</li>
    <li>Answer 4</li>
  </ul>

</div>

JavaScript:

<script type="text/javascript">
    function toggle(tag) {
        var x=document.getElementsByName(tag)[0];
        var a = x.parentNode
        if (a.style.display=='block'){
            a.style.display='none'
        }else{
            a.style.display='block'     
        }
    }


    function init() {
        //this function will add show hide functionality to paired list items,
        //as long as the answer is a list item straight after the question list item.
        //You can also have as many separate lists as you want.
        //all lists must be contained within a div with id QA

        var obj = document.getElementById('QA');
        var elements = obj.getElementsByTagName('li');
               var index = 1 
        //add javascript to question elements
              //you could also add styling to question elements here
        for (var i=0; i < elements.length; i+=2){
            var element = elements[i]; 
            element.innerHTML = "<a href='javascript:toggle(" + index + ")'>" + element.innerHTML + "</a>"
            index = index + 1
        } 
        //add bookmark to answer elements and add styling
        var index = 1
        for (var i=1; i < elements.length; i+=2){
            var element = elements[i]; 
            element.innerHTML = "<a name='" + index + "' id='" + index + "'></a>" + element.innerHTML 
            index = index + 1
                 element.style.padding = '0px 0px 10px 20px' //add indent to answer
                       element.style.listStyleType = 'none' //remove bullet
            element.style.display = 'none' //hide answer element
        }       
     }


window.onload = init; 

</script>

Answer 2

If you're looking for the necessary functions, check out the following:

HTML

<div id="QA">
  <ul>
    <li>Question 1</li>
    <li>Answer 1</li>
    <li>Question 2</li>
    <li>Answer 2</li>
  </ul>
  <ul>
    <li>Question 3</li>
    <li>Answer 3</li>
    <li>Question 4</li>
    <li>Answer 4</li>
  </ul>

</div>

JavaScript:

<script type="text/javascript">
    function toggle(tag) {
        var x=document.getElementsByName(tag)[0];
        var a = x.parentNode
        if (a.style.display=='block'){
            a.style.display='none'
        }else{
            a.style.display='block'     
        }
    }


    function init() {
        //this function will add show hide functionality to paired list items,
        //as long as the answer is a list item straight after the question list item.
        //You can also have as many separate lists as you want.
        //all lists must be contained within a div with id QA

        var obj = document.getElementById('QA');
        var elements = obj.getElementsByTagName('li');
               var index = 1 
        //add javascript to question elements
              //you could also add styling to question elements here
        for (var i=0; i < elements.length; i+=2){
            var element = elements[i]; 
            element.innerHTML = "<a href='javascript:toggle(" + index + ")'>" + element.innerHTML + "</a>"
            index = index + 1
        } 
        //add bookmark to answer elements and add styling
        var index = 1
        for (var i=1; i < elements.length; i+=2){
            var element = elements[i]; 
            element.innerHTML = "<a name='" + index + "' id='" + index + "'></a>" + element.innerHTML 
            index = index + 1
                 element.style.padding = '0px 0px 10px 20px' //add indent to answer
                       element.style.listStyleType = 'none' //remove bullet
            element.style.display = 'none' //hide answer element
        }       
     }


window.onload = init; 

</script>

- "Queries about Javascript answered with a drop-down twist

Answer №1

Similar questions

Is there a way to update a JSON file using React?

Display the information stored in an array onto the console using console.log in Angular with Typescript

The for loop in JavaScript fails to verify the contents of an array and instead shows a message in a designated

Undefined method error encountered within Vue.js nested ref structure

Getting the time difference relative to the current time using date-fns from a MySQL datetime - a step

What is the best way to incorporate additional data into a TypeScript object that is structured as JSON?

"Handling API Calls with AngularJS: Dealing with the [object object] Response

I'm looking for a Visual Studio add-in that can identify and flag any unused CSS classes or IDs within the entire solution

The BeautifulSoup parsing result differs from the code of the original HTML page

Hover events in the browser are currently operating at a sluggish pace

How can HTML be utilized to create a brief description?

Is Storybook webpack stuck in a loop, rebuilding and reloading constantly?

Retrieve data from API using ReactJS and passing parameters to the request

Transferring information between two components in separate Angular 4 modules

The FindProxyForURL function in a pac (proxy-auto-config) file is not compatible with the IE browser

How can you sustain a backend connection using NodeJS as users navigate through different pages?

Textfield style in Struts2 customization

Ways to layer two divs on each other and ensure button functionality is maintained

The invocation of `prisma.profile.findUnique()` is invalid due to inconsistent column data. An invalid character 'u' was found at index 0, resulting in a malformed ObjectID

Angular firing a function in the then clause before the initial function is executed