How to show the content of a jQuery text collapse when pressing enter?

Question

This is my jQuery function (that works) that when I click it, it my text appears:

 $(function() {
    $(".slide_down01").click(function () {
      var $this = $(this),
          id = $this.attr("id"), 
          div = $("." + id);        

      if( div.is(':hidden') ) {
        $(this).find("span").html("&#9660;");
      } else {
        $(this).find("span").html("&#9658;");
      }
      div.stop(true, true).slideToggle("fast");

      return false;       
    });
})

... and this is my HTML :

<div id="cursor01"> 
    <span id="slide01" class="slide_down01"><span>&#9658;</span> Title01 </span>
</div> 
<div>
<a href="#slide01"></a>
<div id="cursor01"> 
    <span id="slide01" class="slide_down01">
 <span>&#9658;</span> Title01</span>
</div>
<div id="node1" class="slide01" style="display:none"> 
    Text01,Text01
</div>

What I want is when I'm selecting this with my tab and press enter that the content appear.

Any clue guys? I will very appreciate it !

Your html is a mess Yagoto. Please clean it up a little bit. — Hanlet Escaño, Apr 26 '13 at 20:25
Yes I do agree, I had been trying a lot of stuff and I will clean it once I figure it out. — Yagoto Mizu, Apr 26 '13 at 20:29

score 2 · Answer 1 · answered Apr 26 '13 at 20:32

2

attach the keypress event to your slide_down01 class. Here's the code:

$(".slide_down01").keypress(function(e) {
    // 13 = enter, 9 = tab
    if ( (e.which == 13) || (e.which == 9) ) {        
       $(this).click();
    }
});

and here's the fiddle: http://jsfiddle.net/acturbo/MwM3j/

I had to update your html a bit.

answered Apr 26 '13 at 20:32

carrabino

1,724
1
14
15

Anthony what modification would I need to do to for only when clicking title 02 the text appear, no need of the title 1 ? – Yagoto Mizu Apr 26 '13 at 20:47
i just updated the fiddle and gave you the 3 options you asked for. To support just the clicking title 02 is the section of code that's active: http://jsfiddle.net/acturbo/MwM3j/5/ – carrabino Apr 26 '13 at 21:27
One comment, when i first learned CSS/HTML many years ago, i didn't grasp the difference between a class. I think it will help you to understand these two concepts. The id of any HTML element must be a unique value, much like your social security #. A class lets you group elements together. You can select a specific element (using id), or a group of elements (using class). e.g. Each "note" below has a unique id (1,2,3), but each note has a class = "notes".
note 1

note 2

note 3
– carrabino Apr 26 '13 at 21:39

score 0 · Answer 2 · answered Apr 26 '13 at 20:32

Try this:

Markup (tried to clean it a little):

<div id="cursor01"> 
    <a href="#">
    <span id="slide01" class="slide_down01"><span>&#9658;</span> Title01 </span>
    </a>
</div>
<div id="node1" class="slide01" style="display:none"> Text01,Text01</div>

jQuery:

$(".slide_down01").click(function () {
      var $this = $(this),
          id = $this.attr("id"), 
          div = $("." + id);        

      if( div.is(':hidden') ) {
        $(this).find("span").html("&#9660;");
      } else {
        $(this).find("span").html("&#9658;");
      }
      div.stop(true, true).slideToggle("fast");

      return false;

});

$("#cursor01").keyup(function(event){
    if(event.which==13)
        $(".slide_down01").trigger("click");
});

LIVE SAMPLE

How to show the content of a jQuery text collapse when pressing enter?

2 Answers2