php - How to add hidden text on wordpress ( Hidden div ) using javascript -

alright i've been searching way when clicks text , scroll down menu drops down more information ( sort of read more ).

i little experience in java or jquery , im not sure problem wether it's in functions.php or script . i've done alot of research , tried alot of things none seem able me out figured id make own post .

keep in , took of codes in templates given other member , tried modify code works site, i trying accomplish similar site : http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/ second example there 3 boxes , 1 shows when click on it, mine text instead of boxes)

my javascript file looks this(as stated in comment idk thechosenone , guess when select box known chosen 1 ) :

jquery(document).ready(function (){      $('.newboxes').each(function(index) {           if ($(this).attr("id") == thechosenone) {                $(this).show(200);           }           else {                $(this).hide(600);           }      }); }(jquery) 

so went ahead , modified function.php , added these line of code :

add_action('wp_enqueue_scripts', 'showonlyone' );  function showonlyone() {    wp_enqueue_script('showonlyone', get_template_directory_uri() . "/js/showonlyone.js"); } 

as calling java script wordpress page have no idea how . template gave me :

<table>    <tr>       <td>          <div style="border: 1px solid blue; background-color: #99ccff; padding: 5px; width: 150px;">             <a id="myheader1" href="javascript:showonlyone('newboxes1');" >show 1 only</a>          </div>          <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #cccccc; display: block;padding: 5px; width: 150px;">div #1</div>       </td>       <td>          <div style="border: 1px solid blue; background-color: #99ccff; padding: 5px; width: 150px;">             <a id="myheader2" href="javascript:showonlyone('newboxes2');" >show 1 only</a>          </div>          <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #cccccc; display: none;padding: 5px; width: 150px;">div #2</div>       </td>       <td>          <div style="border: 1px solid blue; background-color: #99ccff; padding: 5px; width: 150px;">             <a id="myheader3" href="javascript:showonlyone('newboxes3');" >show 1 only</a>          </div>          <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #cccccc; display: none;padding: 5px; width: 150px;">div #3</div>       </td>    </tr> </table> 

can please tell me how im supposed calling function , add block of text ? want when clicks on , box or whatever, drops down , displays additional information , when click on line of text window scroll , other 1 drop down .

took me minute here go:

http://jsfiddle.net/v4dtz/

now, whats going on in code:

<table>    <tr>       <td>          <div style="border: 1px solid blue; background-color: #99ccff; padding: 5px; width: 150px;">             <a class="newboxes" href="#" id="newboxes1">show 1 only</a>          </div>          <div  class ="div_newboxes" id="div_newboxes1" style="border: 1px solid black; background-color: #cccccc; display: block;padding: 5px; width: 150px;">div #1</div>       </td>       <td>          <div style="border: 1px solid blue; background-color: #99ccff; padding: 5px; width: 150px;">             <a class="newboxes" href="#" id="newboxes2" >show 1 only</a>          </div>          <div  class ="div_newboxes" id="div_newboxes2" style="border: 1px solid black; background-color: #cccccc; display: none;padding: 5px; width: 150px;">div #2</div>       </td>       <td>          <div style="border: 1px solid blue; background-color: #99ccff; padding: 5px; width: 150px;">             <a class="newboxes" href="#" id="newboxes3" >show 1 only</a>          </div>          <div  class ="div_newboxes" id="div_newboxes3" style="border: 1px solid black; background-color: #cccccc; display: none;padding: 5px; width: 150px;">div #3</div>       </td>    </tr> 

you'll see changed id of links corresponding div, , added div_ prefix on ids of div.

this way have easy way select div matches link

i gave of links same class, can set 1 onclick event of links.

all of div contain content has same class, can toggle them @ once.

here jquery:

jquery(document).ready(function (){     $('.newboxes').on('click', function(){     var div_id = "#div_" + $(this).prop('id');         $('.div_newboxes').each(function(i, value){                 if($(value).prop('id')=== $(div_id).prop('id')){                     $(div_id).show(200);                 }                 else{                      $(value).hide(600);                    }         });     }) }(jquery)) 

note because used onclick event elements class = "newboxes" able use this refer specific calling element. there no need have thechosenone variable.