Member Avatar for davy_yg

Hello,

I would like to create FAQ with a dropdown text if I click the > and it should open a new text sentence right underneath it. Could anyone teach me or advice me where to find a jquery like that?

  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

    • Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Edited by davy_yg
  • 3 Contributors
  • 9 Replies
  • 608 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by pritaeas
Member Avatar for davy_yg

Thanks for help. I also wonder why my question turn into a sponsored question and it also seems like Daniweb still underconstruction since it seems like it has a different appearance now.

I like the darkgrey old color since the new one is too bright and still not used to it. lol. Is this the final appearance?

---------------------------------------------------

Anyway, that's just a random comment - back to the problem: is there anyway to place icon before the dropdown textbox such as > and when you click the textbox the icon change into V

or

"+" (plus) when you click the icon turns into "-" (minus) Is there such a thing?

Edited by davy_yg
Member Avatar for davy_yg

Thanks for the recommendation.

I try this : http://www.designonslaught.com/a-simple-jquery-faq-style-show-and-hide/

and have not get the correct syntax yet:

index.html

<html>

<head>

<script type="text/javascript">
    $("#faqs dd").hide();
    $("#faqs dt").click(function () {
        $(this).next("#faqs dd").slideToggle(500);
        $(this).toggleClass("expanded");
    });
</script>

<style>
#faqs dt, #faqs dd { padding: 0 0 0 50px }
#faqs dt { font-size:1.5em; color: #9d9d9d; cursor: pointer; height: 37px; line-height: 37px; margin: 0 0 15px 25px}
#faqs dd { font-size: 1em; margin: 0 0 20px 25px}
#faqs dt { background: url(http://www.designonslaught.com/files/2012/06/expand-icon.png) no-repeat left}
#faqs .expanded { background: url(http://www.designonslaught.com/files/2012/06/expanded-icon.png) no-repeat left}
The Demo
</style>

</head>

<body>

<dl id="faqs">
  <dt>Question 1</dt>
  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</dd>

  <dt>Question 2</dt>
  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</dd>

  <dt>Question 3</dt>
  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</dd>
</dl>

</body>

</html>
Edited by pritaeas because: Removed duplicate HTML part.
Member Avatar for gentlemedia

I don't know why you've pasted the snippet 3 times in here, but it's a jQuery function so dou you load the jQuery library on the page as well?

Member Avatar for davy_yg

Whoops you are right

I did not realize.

I add this to the jquery library:

One/faq.php

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
   <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Member Avatar for davy_yg

and I still do not get the right result yet.

Member Avatar for gentlemedia

Put the jQuery function before the closing body tag or wrap it in a document ready.

Edited by gentlemedia
Member Avatar for pritaeas

I have updated my example with a plus/minus indicator.

Edited by pritaeas
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.