Dropdown subcategories

[elena2]

please help me
how can i show categories list like picture, (after click on "more" open drop down list and show all subcategories ) ?

[calinbehtuk]

You will find more details about these categories on this forum.
http://forums.osclass.org/themes/how-to-make-dropdown-category-item/
http://forums.osclass.org/themes/any-themes-with-category-on-the-left-sidebar-with-in-collapsed-format/

[elena2]

hi calinbehtuk
thanks for answer

i used from this code in main page :

Code: [Select]


        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $.each($('.category ul'), function(index, value) {
                    $(this).hide();
                });

                $('.category h1').live('click', function() {
                    $(this).parent().find('ul').toggle('slow');
                });
            })
        </script>


 but , hide all subcategories , i need a code that show 5 or ... subcategories and after click on " more " show all .like attachment picture .

[elena2]

please helppppppppppppppppp..........

[calinbehtuk]

I do not know if this helps. I changed modern theme after many explanations found on this forum. Here you will find theme modified by me, but that is for Romania. http://calinbehtuk.blogspot.ro/2014/01/modificari-aduse-temei-modern-osclass.html
The method used by me for the categories in the drop-down looks like this. http://testeaza.hol.es/
This displays only the main category and if you click on the arrow appear and subcategories. I found a method that displays a fixed number of subcategories and that allows you to display the remaining subcategories in a drop-down. To do this you need to insert the code above this line <?php if ( osc_count_subcategories() > 0 ) { ?>  which is in inc.main.php modern theme modified by me line 35.
Above of that line put the following code:

<?php if ( osc_count_subcategories() > 0 ) { ?>
                                         <ul>
                                        <?php $tic = 0; while ( osc_has_subcategories() && $tic < 5) { ?>
                                            <li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></li>
                                           
                                        <?php $tic++;} ?>
                                        <?php View::newInstance()->_erase('subcategories') ; ?>
                                    </ul>
                                    <?php } ?>

Five is the number of sub-categories will be displayed and the rest will be displayed when you click on the arrow. I hope this help you, and you can change the arrow with the text you want. Sorry for my English, I use google translation.

[aide2001]

good answer calinbethtuk
you could even use a simple javascript hide function and call for it when you want it
ive done this on my search bar as I have many options to choose from and wanted to let users have as much to choose from as possible, but calinbethtuk has already responded now

[elena2]

  no work !

this is my "inc.main.php" :

Code: [Select]


<?php osc_slider(); ?>

<?php
    function drawSubcategory($category) {
        if ( osc_count_subcategories2() > 0 ) {
            osc_category_move_to_children();
            ?>
            <ul>
                <?php while ( osc_has_categories() ) { ?>
                    <li><a class="category cat_<?php echo osc_category_id(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a> <?php drawSubcategory(osc_category()); ?></li>
                <?php } ?>
            </ul>
        <?php
            osc_category_move_to_parent();
        }
    }
    $total_categories   = osc_count_categories();
    $col1_max_cat       = ceil($total_categories/3);
    $col2_max_cat       = ceil(($total_categories-$col1_max_cat)/2);
    $col3_max_cat       = $total_categories-($col1_max_cat+$col2_max_cat);
?>
<div class="categories <?php echo 'c' . $total_categories; ?>">
    <?php osc_goto_first_category(); ?>
    <?php
        $i      = 1;
        $x      = 1;
        $col    = 1;
        if(osc_count_categories () > 0) {
            echo '<div class="col c1">';
        }
    ?>
    <?php while ( osc_has_categories() ) { ?>
        <div class="category">
       
            <h1><strong><a class="category cat_<?php echo osc_category_id(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a> </strong></h1>
            <?php drawSubcategory(osc_category()); ?>
        </div>
        <?php
            if (($col==1 && $i==$col1_max_cat) || ($col==2 && $i==$col2_max_cat) || ($col==3 && $i==$col3_max_cat)) {
                $i = 1;
                $col++;
                echo '</div>';
                if($x < $total_categories) {
                    echo '<div class="col c'.$col.'">';
                }
            } else {
                $i++;
            }
            $x++;
        ?>
    <?php } ?>
</div>
     
     
             <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $.each($('.category ul'), function(index, value) {
                    $(this).hide();
                });

                $('.category h1').live('click', function() {
                    $(this).parent().find('ul').toggle('slow');
                });
            })
        </script>   




and you can see my site:  http://shostka.co

[aide2001]

its not working because your main category still has a href link once clicked
so change from
<li><a class="category cat_<?php echo osc_category_id(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a>
to
<li><a class="category cat_<?php echo osc_category_id(); ?>" href=""><?php echo osc_category_name(); ?></a>
and see how that works, basically once people click on the category it starts the search, but if you slow it down, you will see it starts to reveal the sub categories

[elena2]

hi aide2001

i changed :

                    <li><a class="category cat_<?php echo osc_category_id(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a> <?php drawSubcategory(osc_category()); ?></li>

to:


<li><a class="category cat_<?php echo osc_category_id(); ?>" href=""><?php echo osc_category_name(); ?></a>


and add this code :

<?php if ( osc_count_subcategories() > 0 ) { ?>
                                         <ul>
                                        <?php $tic = 0; while ( osc_has_subcategories() && $tic < 5) { ?>
                                            <li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></li>
                                           
                                        <?php $tic++;} ?>
                                        <?php View::newInstance()->_erase('subcategories') ; ?>
                                    </ul>
                                    <?php } ?>


above:

        if ( osc_count_subcategories2() > 0 ) {

but no work !

[aide2001]

try this
<?php osc_slider(); ?>   

<?php
    function drawSubcategory($category) {
        if ( osc_count_subcategories2() > 0 ) {
            osc_category_move_to_children();
            ?>
            <ul>
                <?php while ( osc_has_categories() ) { ?>
                    <li><a class="category cat_<?php echo osc_category_id(); ?>" href=""><?php echo osc_category_name(); ?></a> <?php drawSubcategory(osc_category()); ?></li>
                <?php } ?>
            </ul>
        <?php
            osc_category_move_to_parent();
        }
    }
    $total_categories   = osc_count_categories();
    $col1_max_cat       = ceil($total_categories/3);
    $col2_max_cat       = ceil(($total_categories-$col1_max_cat)/2);
    $col3_max_cat       = $total_categories-($col1_max_cat+$col2_max_cat);
?>
<div class="categories <?php echo 'c' . $total_categories; ?>">
    <?php osc_goto_first_category(); ?>
    <?php
        $i      = 1;
        $x      = 1;
        $col    = 1;
        if(osc_count_categories () > 0) {
            echo '<div class="col c1">';
        }
    ?>
    <?php while ( osc_has_categories() ) { ?>
        <div class="category">
       
            <h1><strong><a class="category cat_<?php echo osc_category_id(); ?>" href=""><?php echo osc_category_name(); ?></a> </strong></h1>
            <?php drawSubcategory(osc_category()); ?>
        </div>
        <?php
            if (($col==1 && $i==$col1_max_cat) || ($col==2 && $i==$col2_max_cat) || ($col==3 && $i==$col3_max_cat)) {
                $i = 1;
                $col++;
                echo '</div>';
                if($x < $total_categories) {
                    echo '<div class="col c'.$col.'">';
                }
            } else {
                $i++;
            }
            $x++;
        ?>
    <?php } ?>
</div>
     
     
             <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $.each($('.category ul'), function(index, value) {
                    $(this).hide();
                });

                $('.category h1').live('click', function() {
                    $(this).parent().find('ul').toggle('slow');
                });
            })
        </script>   

backup your file first 

[elena2]

aide2001 ,no work !

I do not know if this helps. I changed modern theme after many explanations found on this forum. Here you will find theme modified by me, but that is for Romania. http://calinbehtuk.blogspot.ro/2014/01/modificari-aduse-temei-modern-osclass.html
The method used by me for the categories in the drop-down looks like this. http://testeaza.hol.es/
This displays only the main category and if you click on the arrow appear and subcategories. I found a method that displays a fixed number of subcategories and that allows you to display the remaining subcategories in a drop-down. To do this you need to insert the code above this line <?php if ( osc_count_subcategories() > 0 ) { ?>  which is in inc.main.php modern theme modified by me line 35.
Above of that line put the following code:

<?php if ( osc_count_subcategories() > 0 ) { ?>
                                         <ul>



                                        <?php $tic = 0; while ( osc_has_subcategories() && $tic < 5) { ?>
                                            <li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></li>
                                           
                                        <?php $tic++;} ?>
                                        <?php View::newInstance()->_erase('subcategories') ; ?>
                                    </ul>
                                    <?php } ?>

Five is the number of sub-categories will be displayed and the rest will be displayed when you click on the arrow. I hope this help you, and you can change the arrow with the text you want. Sorry for my English, I use google translation.

yes , i want like your site:  http://testeaza.hol.es/
calinbehtuk !
can you share your inc.main.php ?

[aide2001]

sorry cant help further then

[calinbehtuk]

I hope it is not too late, but I did exactly what you want. Here's the code for file inc.main.php. Replace everything in that file.

Code: [Select]


<?php
    function drawSubcategory($category) {
        if ( osc_count_subcategories2() > 0 ) {
            osc_category_move_to_children();
            ?>
            <ul>
                <?php while ( osc_has_categories() ) { ?>
                    <li><a class="category cat_<?php echo osc_category_id(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a> <span>(<?php echo osc_category_total_items(); ?>)</span><?php drawSubcategory(osc_category()); ?></li>
                <?php } ?>
            </ul>
        <?php
            osc_category_move_to_parent();
        }
    }
    $total_categories   = osc_count_categories();
    $col1_max_cat       = ceil($total_categories/3);
    $col2_max_cat       = ceil(($total_categories-$col1_max_cat)/2);
    $col3_max_cat       = $total_categories-($col1_max_cat+$col2_max_cat);
?>
<div class="categories <?php echo 'c' . $total_categories; ?>">
    <?php osc_goto_first_category(); ?>
    <?php
        $i      = 1;
        $x      = 1;
        $col    = 1;
        if(osc_count_categories () > 0) {
            echo '<div class="col c1">';
        }
    ?>
    <?php while ( osc_has_categories() ) { ?>
        <div class="category">
            <h1><strong><a class="category <?php echo osc_category_slug(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a>




<span>(<?php echo osc_category_total_items(); ?>)</span></strong></h1>
            <?php if ( osc_count_subcategories() > 0 ) { ?>
                                         <ul>
                                        <?php $tic = 0; while ( osc_has_subcategories() && $tic < 5) { ?>
                                            <li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></li>
                                           
                                        <?php $tic++;} ?>
                                        <?php View::newInstance()->_erase('subcategories') ; ?>
                                    </ul>
                                    <?php } ?>

        <?php if ( osc_count_subcategories() > 0 ) { ?>
                                        <ul class="subcategory">
                                            <?php while ( osc_has_subcategories()  ) { ?>
                                                <li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span> </li>
                                           
<?php } ?>
                                        </ul>
                                    <?php } ?>
<a href="javascript:doSomething()" style="float:right;text-decoration:none;padding:5px;"  alt="Collapsed" class="expand" >More>></a>
</div>
        <?php
            if (($col==1 && $i==$col1_max_cat) || ($col==2 && $i==$col2_max_cat) || ($col==3 && $i==$col3_max_cat)) {
                $i = 1;
                $col++;
                echo '</div>';
                if($x < $total_categories) {
                    echo '<div class="col c'.$col.'">';
                }
            } else {
                $i++;
            }
            $x++;
        ?>
    <?php } ?>
</div>
<!--scrip categori cu drop-down-->
<script type="text/javascript">
    $(document).ready(function() {
     
$('.subcategory').toggle();
        $('.expand').live('click',function(){
             this.style.visibility= 'hidden';
$(this).parents('.category').find('.subcategory').slideToggle();
            if ($(this).attr("alt") == "Collapsed") {
                $(this).attr("alt", "Expanded")
           
}
           
        });
    });
</script>

I hope to be helpful

[elena2]

hi
aide2001 ,  calinbehtuk

thank you friends for your help!
is already solved , everything is alright now .

[Freelancing Care]

Your code was effective to me.. Thanks mate for your nice reply... I am going to use that for my own project.

I hope it is not too late, but I did exactly what you want. Here's the code for file inc.main.php. Replace everything in that file.

Code: [Select]


<?php
    function drawSubcategory($category) {
        if ( osc_count_subcategories2() > 0 ) {
            osc_category_move_to_children();
            ?>
            <ul>
                <?php while ( osc_has_categories() ) { ?>
                    <li><a class="category cat_<?php echo osc_category_id(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a> <span>(<?php echo osc_category_total_items(); ?>)</span><?php drawSubcategory(osc_category()); ?></li>
                <?php } ?>
            </ul>
        <?php
            osc_category_move_to_parent();
        }
    }
    $total_categories   = osc_count_categories();
    $col1_max_cat       = ceil($total_categories/3);
    $col2_max_cat       = ceil(($total_categories-$col1_max_cat)/2);
    $col3_max_cat       = $total_categories-($col1_max_cat $col2_max_cat);
?>
<div class="categories <?php echo 'c' . $total_categories; ?>">
    <?php osc_goto_first_category(); ?>
    <?php
        $i      = 1;
        $x      = 1;
        $col    = 1;
        if(osc_count_categories () > 0) {
            echo '<div class="col c1">';
        }
    ?>
    <?php while ( osc_has_categories() ) { ?>
        <div class="category">
            <h1><strong><a class="category <?php echo osc_category_slug(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a>




<span>(<?php echo osc_category_total_items(); ?>)</span></strong></h1>
            <?php if ( osc_count_subcategories() > 0 ) { ?>
                                         <ul>
                                        <?php $tic = 0; while ( osc_has_subcategories() && $tic < 5) { ?>
                                            <li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></li>
                                           
                                        <?php $tic  ;} ?>
                                        <?php View::newInstance()->_erase('subcategories') ; ?>
                                    </ul>
                                    <?php } ?>

        <?php if ( osc_count_subcategories() > 0 ) { ?>
                                        <ul class="subcategory">
                                            <?php while ( osc_has_subcategories()  ) { ?>
                                                <li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span> </li>
                                           
<?php } ?>
                                        </ul>
                                    <?php } ?>
<a href="javascript:doSomething()" style="float:right;text-decoration:none;padding:5px;"  alt="Collapsed" class="expand" >More>></a>
</div>
        <?php
            if (($col==1 && $i==$col1_max_cat) || ($col==2 && $i==$col2_max_cat) || ($col==3 && $i==$col3_max_cat)) {
                $i = 1;
                $col  ;
                echo '</div>';
                if($x < $total_categories) {
                    echo '<div class="col c'.$col.'">';
                }
            } else {
                $i  ;
            }
            $x  ;
        ?>
    <?php } ?>
</div>
<!--scrip categori cu drop-down-->
<script type="text/javascript">
    $(document).ready(function() {
     
$('.subcategory').toggle();
        $('.expand').live('click',function(){
             this.style.visibility= 'hidden';
$(this).parents('.category').find('.subcategory').slideToggle();
            if ($(this).attr("alt") == "Collapsed") {
                $(this).attr("alt", "Expanded")
           
}
           
        });
    });
</script>
You can find more about it at this link but it is in Romanian http://calinbehtuk.blogspot.ro/2014/02/cum-afisam-doar-5-subcategorii-pe.html
I hope to be helpful