jQuery get selector in qiucker and precise way and get code simple
<p>This is my first post... and.. I'm just lov to use jQuery. I need to get this code as simple and fast as jQuery those.. So.. </p>

<p>Thanks in advance.</p>

<p>// plug in... ahhh... i'm so shamed</p>

<pre><code>jQuery.fn.fadeSliderToggle = function(settings) {

       settings = jQuery.extend({

                  speed:500,

                  easing : "swing"

       }, settings)

if( $(this).css('opacity') == "0" )

{

       $(this).next().next().hide();

       $(this).next().next().css({ width: 195 });

       $(this).animate({

                  opacity: 1,

                  marginLeft: '0',

       }, settings.speed, settings.easing).css({'display':'block'});

       $(this).next().next().fadeIn();

       $(this).next().next().children('p:eq(0)').css({'display':'none'});

 } else {

       $(this).next().next().hide();

       $(this).animate({

                  opacity: 0,

                  marginLeft: '-250',

       }, settings.speed, settings.easing);

       $(this).next().next().css({ width: 430 });

       $(this).next().next().children('p:eq(0)').css({'display':'block'});

       $(this).css({'display':'none'});

       $(this).next().next().fadeIn();

   }

}; 
</code></pre>

<p>CALL:</p>

<pre><code>$('a.techinfo_link').click(function(){

           // get the DIV with ID="techinfo"

           $(this).parent().parent().prev().prev().fadeSliderToggle();

           return false;

 });
</code></pre>

<p>Css:</p>

<pre><code>/* root element for scrollable items */
.items_scroll { 
    position:absolute;

    /* this time we have very large space for height */ 
    height:20000em; 
    margin: 0px;
}

/* single scrollable item */
.items_scroll div {
    float:  left;
    border-bottom:1px solid #ddd;
    padding:15px;
    font-size:12px;
    height:190px;
    cursor: default;
    opacity: 0.65;
    display: inline;
}
/* elements inside single item */
.items_scroll img {
    float:left;
    margin: 0;
    border: 0 none;
    outline: 0 none;
    height:187px;
    width:250px;
    opacity: 1;
    cursor: pointer;
}

div.techinfo {
        float:left;
        height:175px;
        width:200px;
        margin-left: -250px;
        opacity:0;
        display:none;
    }
    div.img_wrapper {
        position: relative;
        float:left;
        width: 250px;
        height: 187px;
        display:inline;
        line-height: 187px;
        margin: 0; padding: 0; outline: 0; border: 0 none;
    }
    div.opis {
        float: right;
        height: 160px;
        width: 430px;
        border: 0 none;
        margin: 20px 20px 0px 20px;
        padding: 0;
        cursor: pointer;
    }

&lt;div class="items_scroll"&gt;

                &lt;div&gt;
                    &lt;div class="techinfo"&gt;
                        &lt;h4&gt;Title&lt;/h4&gt;
                        &lt;em&gt;some text&lt;/em&gt;
                        &lt;h4&gt;Title&lt;/h4&gt;
                        &lt;em&gt;some text&lt;/em&gt;
                        &lt;h4&gt;e-mail&lt;/h4&gt;
                        &lt;em&gt;blabla@blabla.com&lt;/em&gt;
                    &lt;/div&gt;
                    &lt;div class="img_wrapper"&gt;
                        &lt;a href="ajax1.html" rel="#yesno"&gt;
                            &lt;img src="images/front/1.png" width="250" height="156" alt="1" /&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="opis"&gt;
                        &lt;h3&gt;1. Barcelona Pavilion&lt;/h3&gt;
                        &lt;strong&gt;
                            The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe 
                            and built for the International Exposition in 1929.
                        &lt;/strong&gt;
                        &lt;p&gt;
                            The Pavilion was not only a pioneer for construction forms with a fresh, disciplined
                            understanding of space, but also for modeling new opportunities for an exciting 
                            association of free art and architecture. 
                        &lt;/p&gt;
                        &lt;p&gt;
                            &lt;a href="#" class="techinfo_link"&gt;Technical info&lt;/a&gt; &amp;nbsp; &lt;a href="ajax1.html" rel="#yesno"&gt;Project details&lt;/a&gt;
                        &lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Sorry for missing html... i think i get this thing with a replacing with variables... but.. stil is so big.. in this way it's working in all browsers... at least on MAC OS X.</p>

<p>problem is get that div with id="techinfo", scroll it to the right with fadeIn, and in same time fadeOut the all div with class="opis", hide first paragraph in that DIV, shrink the div with class="opis" and fadeIn that div. And the all thing in revers... ahhhh...</p>

<p>I ADD A TEST PAGE.. :-)</p>

<p><a href="http://web.me.com/sasha.milic/test/index.html" rel="nofollow">TEST PAGE</a></p>
