CODEWITHSUNDEEP
javascriptjquery
Yaw Ansong Snr
Yaw Ansong Snr

Reputation: 517

jquery toggle visibility

I'm tyring to show/hide the content of a link when it's clicked. much like what you see in FAQ pages. Basically I want to get the data-* of the clicked link and display it's content. This is what I've done but it still doesn't work :(.

My html is as follows:

<ul>
    <li><a data-faq="1" href="#question"> + first question product?</a></li>
        <p  data-faq="1" class="hidden">my content</p>

    <li><a data-faq="2" href="#question">+ More lorem?</a></li>
        <p data-faq="2" class="hidden">my content</p>

</ul>​

and jquery like this:-

 $('.hidden').hide();
 $("#question").click(function(){

 var activeFaq = $(this).attr("data-faq");    

    //show the content of the active faq
    $(activeFaq).toggle();
return false;
});

​

this is the fiddle:- http://jsfiddle.net/8EJDc/ again I'd like to toggle the + to - upon the toggle click and vice versa

Upvotes: 0

Views: 5309

Answers (8)

Jaiden
Jaiden

Reputation: 18

i don't know if i got what's your problem. but basically, i think it is closed.

here the code

<script>
    $(document).ready(
        function(){
            $(".hidden").hide();
            $("ul li a").click(function(){
                $(this).next().text($(this).attr("data-faq")).toggle();
            });
    }
    );
</script>

Note: <p> should be inside the <li> and next to <a>

i think there's a problem with your HTML code. i noticed <p> it outside <li>

the content of data-faq will be the content of <p> tag

Click here for the fiddle

Upvotes: 0

Dipak
Dipak

Reputation: 12190

EDIT: Updated Fiddle

Try this - 

<ul>
    <li>
        <a data-faq="1" class="question"> <span>+</span> first question product?</a>
        <p data-faq="1" class="hidden">my content</p>
    </li>       
    <li>
        <a class="question"><span>+</span> More lorem?</a>
        <p class="hidden">my content</p>
    </li>   
</ul>

$('.hidden').hide();
$(".question").click(function(){
    var $this = $(this).find('span');
    $this.text($this.text() == '+' ? '-' : '+');  
    $(this).next('p').toggle();   
});

Upvotes: 5

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

Your HTML Should look like as given below, because a ul only has li tags instead of any other tags. So keep your <p> tags inside an <li> tag.

 <ul>
    <li>
        <a class="faq" href="#question"> <span class="symbol">+</span> first question product?</a>
        <p class="hidden">my content</p>
    </li>

    <li>
        <a class="faq" href="#question"><span class="symbol">+</span> More lorem?</a>
        <p class="hidden">my content</p>
    </li>            

</ul>​

And jQuery :

$('.hidden').hide();

$(".faq").click(function(event){    
    event.preventDefault();
    $(this).next('.hidden').toggle();

    // below Code will toggle 'plus' & `minus`
    if($(this).find('.symbol').html() == "+") {
         $(this).find('.symbol').html("-")
    } else {
         $(this).find('.symbol').html("+")    
    }

});

SEE DEMO

Upvotes: 1

amtanay
amtanay

Reputation: 23

The approach you are using is wrong. you should not call jquery of an anchor using its href attrib. It should be either class or id attrib. Also, instead of hidden, use $().css() .

<ul>
<li><a class="question" data-faq="1"  href="#question"> + first question product?</a></li>
    <p id="data-faq1" class="hidden">my content</p>

<li><a class="question" data-faq="2" href="#question">+ More lorem?</a></li>
    <p id="data-faq2" class="hidden">my content</p>

​

--

$('.question').click(function(){
var paraId = "#data-faq" + $(this).attr("data-faq");

$(paraId).click.toggle(function () {
        $(this).css("display","none");
    }, function () {
        $(this).css("display","block");
});

});

Upvotes: 0

Alex Ball
Alex Ball

Reputation: 4474

Change $('#question') is refer to element id.

And this could work:

$("a").click(function(e){

    e.preventDefault();

    $(this).parent().next('.hidden').toggle();

});

Upvotes: 1

Diego ZoracKy
Diego ZoracKy

Reputation: 2285

Man, you were so much on the wrong way.

You can't have a P inside a UL if it's not inside an LI.

You were trying to call an element by it's ID with $("#question"). But you didn't declare any ID.

I tried to rewrite your code:

HTML

<ul>
    <li><a data-faq="1" href="#" class="question"> + first question product?</a>
    <p data-faq="1" class="answer">my content</p>
    </li>
    <li><a href="#" class="question">+ More lorem?</a>
        <p class="answer">my content</p>
    </li>
</ul>​

JS

$('.answer').hide();
$(".question").click(function(evt){
    evt.preventDefault();
    $(this).next(".answer").toggle();
});

I changed some class names to put more semantic

Upvotes: 1

designosis
designosis

Reputation: 5263

Difficult to tell what the data-faq is for, or if you even need it.

But this seems to do what you want ... http://jsfiddle.net/vvJPU/3/

$('a.question').click(function(){
    $(this).next('.hidden').show();
    return false;
});

Upvotes: 0

sundar
sundar

Reputation: 1760

I found quite a few errors in your script. I fixed most of them and tried to achieve the thing you are looking for.

http://jsfiddle.net/vvJPU/1/

Check this fiddle.

Upvotes: 0

Related Questions