$(document).ready(function(){ $(".job_link").click(function(){ $(this).parents(".job_item").find(".job_desc").toggleClass("job_hidden"); $(".arrow span").text(↓); }); });

I want the contents of the span to change when they are clicked, by default it is there нужно And it’s necessary that when they are clicked, they change to ↓ when they click again to

How to do this? Now this code is not working, because .arrow span does not understand for which class for some reason.

Added markup:

  <div class="job_item"> <div class="job_title"> <a class="job_link" href="javascript:void(0);"> <b><?=$name?> </b></a> <span class="arrow" style="cursor: pointer; color:#911B1D;">&uarr;</span> </div> <div class='job_desc job_hidden'> <p> <?=$text?> </p> </div> </div>
  • .arrow span - not quite right for a particular case, here you need to write span.arrow :-) - chernomyrdin

2 answers 2

By slightly complicating the markup, you can do this:

 <style type="text/css"> .job_item span.up, .job_item span.down { cursor: pointer; color:#911B1D; display: none; } .job_item .job_desc { display: none; } .job_item .up span.up, .job_item .down span.down { display: inline; } .job_item .down .job_desc { display: block; } </style> ... <div class="job_item"> <div class="up"> <div class="job_title"> <a class="job_link" href="javascript:void(0);"> <b><?=$name?> </b></a> <span class="up">&uarr;</span> <span class="down">&darr;</span> </div> <div class='job_desc'> <p><?=$text?></p> </div> </div> </div> ... <script type="text/javascript"> $(document).ready( function () { $(".job_link").click( function () { var o = $(this).parent().parent(); o.attr( "class", (o.attr("class") == "up") ? "down" : "up" ); } ); } ); </script>

PS You can see how it looks here: http://jsfiddle.net/chernomyrdin/cEsad/

  • Thanks, that is necessary. - Tchort
  • one
    In principle, you can make it easier in terms of markup, in the example I tried to preserve what you had as much as possible. You can do: <div class = "job_item"> <div class = "up"> <a class="up" href="#!up"> <u> ... </ u> <span> & uarr; < / span> </a> <a class="down" href="#!down"> <u> ... </ u> <span> & darr; </ span> </a> <p> .. .. </ p> </ div> </ div> So the more transparent it turns out, although I don’t find that there will be output in <p> , there may be nuances - chernomyrdin
  • The first example fits perfectly, the <p> will be the most different. - Tchort

Use $ .toggle , and place a response on it in it.

  • Now it is non-working code, because .arrow span does not understand for which class for some reason. - Tchort
  • Well, yes, you need something like that, only with .arrow span you need to figure it out (without seeing the markup, it’s not clear how). <pre> $ (document) .ready (function () {$ (". job_link"). toogle (function () {$ (this) .parents (". job_item"). find (". job_desc"). toggleClass ("job_hidden"); $ (". arrow span"). text (& darr;);}, function () {$ (this) .parents (". job_item"). find (". job_desc"). toggleClass ( "job_hidden"); $ (". arrow span"). text (& uarr;);});}); </ pre> - barber
  • Added markup. - Tchort
  • It is necessary to change places: span .arrow. Well, yes, they have already written above :) - barber