0

I want to achieve similar result like this page: http://www.zillow.com/homes/for_sale/Newark-NJ/12970_rid/40.749598,-74.169281,40.7296,-74.200952_rect/14_zm/1_fr/

Simply without the bells and whistles, let's say I wanna list the entries on the page using {exp:channel:entries channel="news" limit="10"} and then when visitor clicks on an entry on the list, I want to show the details of the selected entry on a slide panel on the same page using jquery. How can I achieve this? Any idea?

1

Hi you can do something similar to this:

   <div>
       <ul>
          {exp:channel:entries channel="foo" limit="10" dynamic="no"}
            <li class="select-entry"><a class="entry{count}" href="#">{title}</a></li>
          {/exp:channel:entries}
       </ul>
    </div>

    <div class="entry-data">
       {exp:channel:entries channel="foo" limit="10" dynamic="no"}
         <div class="entry-data entry{count}" style="display:none;"> 
             {data}
         </div>
       {/exp:channel:entries}
    </div>

Then in your js do something like this:

$(document).ready(function (){
   $('.select-entry a').on('click', function(e) {
      e.preventDefault;        
      var class = $(this).find('a').attr('class');
      $('.entry-data').hide(); 
      $('.entry-data .' + class).show();
   });
});

So you create two instances of your channel entries. One is for the listing the other is for the data. We give them unique classes using the "count" variable. Then in jquery, we prevent the a click, hide all any other selected data, get the clicked "a" tags class and shows the appropriate div based on that class.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.