Question

To change selector so it only show/hides when i click the image i put spoiler/ popdown menu directly after .OS image. Right now the popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.

But the code isn’t perfect because when i click the 1st MAC both spoilers are opened.

But I want that spoilers are opened one at a time

But the main problem is that I can’t fix the javascript code properly inside these types of spoilers (dokuwiki class) inside <td> tags:

This is the javascript code I use :

<div class="dokuwiki">
    <div class="right_page">
        <div class="entry-content">
            <script type="text/javascript" src="./zzzz_files/jquery.js"></script>
            <script type="text/javascript">                                         
                $(document).ready(function(){
                    $(".nonjs").removeAttr( "href"); //href is needed for users without JS
                    $('.OS').click(function(){
                        if($(".details").is(":visible"))
                        {
                            $(".details").not(":hidden").hide("slow");
                            return true;
                        }
                        else
                        {
                            $(".OS").not(this).each(function(i) {
                                $(".details").hide("slow");
                            });
                            $(".details").show("slow");
                            return false;
                        }
                    });
                });  
            </script>     
            <style type="text/css">
                <!--
                .details {
                    display: none;
                    clear: both;
                    padding: 2px;
                }
                .nonjs{
                    cursor:pointer;
                }
                img {
                    border: 0px;
                }
                -->
            </style>

I thought about doing a video to better explain the problem and provide the local version of files for testing code:

Thanks in advance

Answer 1

This code works:

 $(document).ready(function(){
 $(".nonjs").removeAttr( "href"); 
//href is needed for users without JS

 $('.OS').click(function(e){
           if(!$(e.target).parents('.details').length){
                        if($(this).find('.details').is(":visible"))
                        {
                            $(this).find('.details').not(":hidden").hide("slow");
                            return true;
                        }
                        else
                        {

                            $(this).find('.details').show("slow");
                            return false;
                        }
          }
});
 });