Search results load individual post in slide out div

Since you wanted best-practices, methods, advice, here is my take on how you should proceed:

1. First of all, divide the content of your page in two ideal spaces, the list of posts, and the content. Something like this:

   <nav class="post-navigation">
       <ul>
           <li>
               <h2>{Post title}</h2>
               <p>{Excerpt} [&hellip;]</p>
               <p><a href="https://wordpress.stackexchange.com/questions/87312/{post-permalink}">Read more &rarr;</a></p>
           </li>
       </ul>
   </nav>
   <section class="post-content"></section>
   

   Consider making the space with a list of post a <ul> inside a <nav> element, to be as semantic as possible.

2. To hide the .post-content section, don’t use display:none. As you want to animate it with a sliding effect, position it outside of the screen. Give it already the width: 70% which is your goal.

3. Now that you have your layout, well… layed out… let’s bring on the interesting parts. Most things will happen when you click on the links to read more, so bind a function to the click event with jQuery, like so:

   $('nav.post-navigation li a').click(function(e){
       // Function body
   });
   

4. Slide the content by animating the position of your .post-content and the width of your nav. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.
5. Get your post content using an AJAX request. You can use the href attribute that you put in your readmore link in order to fetch the correct content. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content. Besides, think about ‘dem spiders! Check for success and add your content to the div.post-content. You may use, for example, the append() method.

Basically, like this, you have what you are looking for. A content will be fetched with AJAX and served in a section which slides over the previously full-screen list of posts, making it look more like a sidebar navigation system.

You might want to add a little bit more details and refine what you have. I may suggest the following for starters:

1. Make your website look more responsive by the cautious use of loading .gifs.

2. Don’t double serve content: check whether the user is clicking to the link of the currently displaying page and don’t fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.

3. Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will look much more advanced.