Question

This is my css and Jquery i created this two functions to show text when an image in a table is clicked, then if the text is clicked it shows the image again.

<style>
.espanto {
    margin:0px 25px 0px 25px;
    display:none;
}

</style>
  <script>
function showImage(){
                $('.espanto').show();
                $('.hide').hide();
            }
            function hidonio(){
                $('.espanto').hide();
                $('.hide').show();
            }
</script>

Then i have this structure. here is where i coded the table and use the classes to make it happen

  <div id="content">
    <p align="center"><span class="titles" style="color:#1A4487; line-height:10px;">Productos Artesanales Gourmet</span></p>
    <div class="bar"></div>
    <p class="parag" style="  ">Kanaan le ofrece una extensa seleccion de conservas, chutneys, aceites y salsas, que le brindaran ese sabor que usted estaba buscando, por favor no dude en contactarnos si desea una cotizacion o muestras gratis, de clic en alguna imagen para ver su descripcion.</p>
    <p align="center"><span class="titles espanto" style="color:#1A4487; line-height:10px;"><br />
      Descripciones.</span></p>
    <table align="center" style="color:#1A4487;" width="650" border="0">
      <tr>
        <td width="250px"><p class="titles" align="center" > <span class="parag espanto"><br />
             <a href="#" onclick="hidonio()" >Producto de origen Hindú que sirve para acompañar y hornear carnes como pescado, pollo, cerdo, etc. Dándole un exquisito sabor a sus platillos, sabores: ciruela, tamarindo, carambolo, calabaza,  durazno y piña</a></span><a href="#" onclick="showImage()" ><img src="pr/Chutneys 2.jpg" height="200" class="hide" /></a><br />
            Chutneys</p></td>
        <td width="250px"><p class="titles" align="center"><span class="parag espanto"><br />
            <a href="#" onclick="hidonio()" > Aceites aderezados para saborizar carne y ensaladas de sabor canela, romero, laurel, thai, (rojo y picante), y hiervas finas</a></span><a href="#" onclick="showImage()" ><img src="pr/Aceites 2 a.jpg" height="200" class="hide"/></a><br />
            Aceites </p></td>
        <td width="250px"><p class="titles" align="center"> <span class="parag espanto"><br />
             <a href="#" onclick="hidonio()" >Conservas dulces (frutas en almíbar)<br />
            De todo tipo de frutas (guayaba, mango, durazno, piña, camote, calabaza, etc.)<br />
            <br />
            Conservas saladas (encurtidos)
            En salmuera o en vinagre (col morada, calabacita, espárragos, chichar

Answer 1

You should follow the jQuery approach of unobtrusive JavaScript and avoid inline functions and onclick handlers.

Instead use a selector to define a click event on your element like this:

$('.titles a:first').on('click', function(){
  $(this).closest('p').find('.espanto').hide();
  $(this).closest('p').find('.hide').show();
});

This is basically your first scenario. The second will work analogical with $('.titles a:last')....

Have a look at the jQuery documentation for on, selectors and traversing

---

Update

Here is a working jsFiddle that should do what you want. The code above is not completely working, especially the selector is false to get the links. Here is the update from the fiddle:

$('table td').find('a:first').on('click', function(){
    $(this)
        .parent()
            .hide()
        .parent().find('img').show();
}).end()
    .find('a:last').on('click', function(){
        $(this).hide()
            .closest('td').find('span:first').show();
    });​