CODEWITHSUNDEEP
jquerytabsaccessibilityenter
Yagoto Mizu
Yagoto Mizu

Reputation: 1

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

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("▼");
      } else {
        $(this).find("span").html("►");
      }
      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 !

Upvotes: 0

Views: 211

Answers (2)

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

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

Upvotes: 0

carrabino
carrabino

Reputation: 1762

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.

Upvotes: 2

Related Questions