Toggle posts visible or hidden

  • Anthony Acosta

    (@anthon1)


    15 years, 5 months ago

    Hi,

    I have a feature block on my site which contains a single post headline, along with an associated picture and the excerpt. Below this block is a row of other pictures from previous posts. I would like to have the top story change depending on which image the visitor clicks on. I’ve been able to get close using a display:none, and display:block.

    My question is, has anyone done this with a “hide all except” the visible post. And if not, I’ve been working to integrate the “loop” into a javascript array to enable this kind of functionality.

    I’ll post it here if someone can help me make it work.

    Thanks
    Anthony

Viewing 1 replies (of 1 total)
  • Thread Starter Anthony Acosta

    (@anthon1)

    15 years, 5 months ago

    Here is the BROKEN code that I was hoping someone could help me fix.

    <script type="text/javascript">
states=new Array()
<?php $my_query1 = new wp_query1('showposts=10'); ?>
<?php $i = 1; ?>
<?php while ($my_query1->have_posts()) : $my_query1->the_post(); ?>
states['<?php $i=$i+1; ?>']="<?php the_ID(); ?>"
<?php endwhile; ?>
<?php endif; ?>
function hideAllExcept(elm) {
for (var i = 0; i < states.length; i++) {
var layer = document.getElementById(states[i]);
if (elm!= states[i]) {
layer.style.display = "none";
}
else {
layer.style.display = "block";
}
}
}
</script>

    And then to list the stories with toggles, I use this code.

    <ul style="list-style-type:none;display: inline;">
    <?php $my_query = new wp_query('showposts=10'); ?>
    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <style>
   div#commentForm<?php the_ID(); ?>
{
  margin: 10px 20px 0px 20px;
  display: none;
}
  </style>
    <li><a href="#" onclick="hideAllExcept(this.<?php the_ID(); ?>);" rel="bookmark" class="headlines" title="<?php the_title(); ?>"><img src="<?php post_image('/videopreview.jpg', false, false); ?>" width="50px" alt="<?php the_title(); ?>" border=0 name="<?php the_title(); ?>" /></a></li>
    <?php endwhile; ?>
  </ul>
Viewing 1 replies (of 1 total)
  • The topic ‘Toggle posts visible or hidden’ is closed to new replies.