0

This is for a wordpress store and I want to show the categories names automatically, but with the sub-categories hidden, the code below works perfectly with the hover effect, now I wish to have the click effect instead. The $cats variable is to use the get_terms() function, but for here to work everywhere I had included a few categories, the categories only go so far as the "third generation".

<?php $cats = array(array('first', 'sub-first', 'sub-sub-first'),
                    array('second', 'sub-second'),
                    array('third', 'sub-third', 'sub-sub-third')); ?>
<h3>Categories</h1>
<ul class="ul1"> <?php
  foreach($cats as $cat):
    if (isset($cat[0])): ?>
      <li class="li1" onclick="test()"><a href="#"><?php echo $cat[0] ?></a> <?php
        if (isset($cat[1])):?>
          <ul class="ul2">
            <li class="li2"><a href="#"><?php echo $cat[1] ?></a> <?php
              if (isset($cat[2])):?>
                <ul class="ul3">
                  <li class="li3"><a href="#"><?php echo $cat[2] ?></a> </li>
                </ul> <?php
              endif; ?>
            </li>
          </ul> <?php
        endif; ?>
      </li> <?php
    endif;
  endforeach; ?>
</ul>

<style media="screen">
  ul{
    list-style: none;
  }
  a{
    text-decoration: none;
    color:#fff;
  }
  a:hover{
    color:#EF7522;
  }
  .li1{
    background:#1B2332;
    width:200px;
    border:1px solid lightgreen;
    padding:10px;
  }
  .ul2, .ul3{
    display:none;
  }
  .li1:hover .ul2{
    display:block;
  }
  .ul2:hover .ul3{
    display:block;
  }
</style>

for the click effect I had remove from the style the last two hover effects and add the javascript function test();

<script type="text/javascript">
    function test(){
        $(".ul2").css({
            "display":"block"
        });
    } 
</script>

What is happening is that I click a category and all sub-categories are showing, What I wanted is the same as the hover effect, that if I click the first category, I have only the sub-categories of that category and so on.

If someone could help me, I have been twisting my mind over this for a few days already!

0

well, I went for a different approach, in this case with radiobuttons. It is working and it is 95% the result desired.

<?php $cats = array(array('first', 'sub-first', 'sub-sub-first'),
                    array('second', 'sub-second'),
                    array('third', 'sub-third', 'sub-sub-third')); ?>
<label>Categorias</label> <?php
foreach($cats as $cat):
  if (isset($cat[0])): ?>
    <div class="div1">
      <input type="radio" id="<?php echo $cat[0] ?>" name="age" value="30">
      <label for="<?php echo $cat[0] ?>"><?php echo $cat[0] ?></label> <?php
      if (isset($cat[1])):?>
        <ul class="ul2">
          <li class="li2">
            <input type="radio" id="<?php echo $cat[0] ?>" name="SUB" value="60">
            <label for="<?php echo $cat[1] ?>"><?php echo $cat[1] ?></label><?php
            if (isset($cat[2])):?>
              <ul class="ul3">
                <li class="li3"><a href="#"><?php echo $cat[2] ?></a> </li>
              </ul> <?php
            endif; ?>
          </li>
        </ul> <?php
      endif; ?>
    </div> <?php
  endif;
endforeach; ?>
<style media="screen">
  ul{
    list-style: none;
  }
  a{
    text-decoration: none;
  }
  a:hover{
    color:#EF7522;
  }
  .div1 ul{
    display:none;
  }
  .div1 input:checked ~ ul {
    display: block;
  }
</style>

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.