Show next div when focusing on input before it , and hide it again after that (CSS3 , JavaScript, Jquery)

Question

I have a table with fields and divs next to them for each field

i need to show them with opacity effect (0 - 100 and 100 - 0) when focusing on field and hide them again when field is not focused

<!-- First -->
<tr class="tr">
    <td class="td">
        <input name="field1" type="text" class="field">
        <div class="div">Description 1</div>
    </td>
</tr>
<!-- Second -->
<tr class="tr">
    <td class="td">
        <input name="field2" type="text" class="field">
        <div class="div">Description 2</div>
    </td>
</tr>
...

So when i focus on field1 i need to show the next div with Description 1 etc...

As i don't need jquery for anything else i don't think using jquery library is the best option, so please guide with CSS3 or Javascript and if there is no way then guide with jQuery please

i already use document.getElementById(id) style.display=="block" but i need to have IDs for each div and many lines of javascript and i also have the opacity or other effects problem

Here is the answer after redaxmedia's guide

<style type="text/css">
    .divclass {
        visibility: hidden;
        zoom: 1;
        filter:alpha(opacity=0);
        opacity: 0.0;
        -webkit-transition: all 300ms;
        transition: all 300ms;
    }
    input.inputclass:focus + div {
        visibility: visible;
        zoom: 1;
        filter:alpha(opacity=100);
        opacity: 1.0;
        -webkit-transition: all 300ms;
        transition: all 300ms;
    }
</style>

<table>

<tr>
    <td>
        <input name="field1" type="text" class="inputclass">
        <div class="divclass">Description 1</div>
    </td>
</tr>

<tr>
    <td>
        <input name="field2" type="text" class="inputclass">
        <div class="divclass">Description 2</div>
    </td>
</tr>

</table>

the only problem is using visibility:hidden will still take place in the page its not like display:hidden

if any one has any solution for this too, please let me know

Answer 1

input:focus + div {display:block}

如果您想拥有像$ .fadeIn（）和$ .fadeOut（）这样的jQuery效果...结合不透明度，可见性和过渡效果:-)