0

I would like my brand directory to have a click event. So if a visitor clicks 'A' for example, all brands within A are shown. I have the below code which collates the brands - however, the script I am trying to use to get the click event does not seem to work. Can anyone help? Below is the code exactly as it is in the PHTML file (I am using the script inline).

CODE

<div class="brands-mob" style="padding-left:5px;">
    <ul>
        <?php foreach($alph as $letter => $children): ?>
        <li style="float:left;width:100%;">
        <span style="text-transform:uppercase;font-size:20px;"><?php echo $letter; ?></span>
            <ul>
                <?php foreach ($children as $child){
                $skin_url = $child->getImageUrl(); ?>
                <li><a href="<?php echo $child->getURL();?>" title="<?php echo $child->getName();?>">
                        <span class="brand-name"><?php echo $child->getName();?></span>
                    </a>
                </li>

                <?php   }?>
            </ul>
        </li>
        <?php endforeach; ?>
    </ul>
</div>
<script>

$("UL UL").css("display", "none");

$(".title").click(function(e) {
    e.preventDefault();
   $(this).next("UL").toggle(); 
});
</script>

Can anyone please suggest an edit to my code to achieve this effect?

Selfridges Mobile Brand Directory

2 Answers 2

0

Replace above code with below code and check,

   <div class="brands-mob" style="padding-left:5px;">
        <ul>
            <?php foreach($alph as $letter => $children): ?>
            <li style="float:left;width:100%;">
            <span class="title" style="text-transform:uppercase;font-size:20px;"><?php echo $letter; ?></span>
                <ul>
                    <?php foreach ($children as $child){
                    $skin_url = $child->getImageUrl(); ?>
                    <li><a href="<?php echo $child->getURL();?>" title="<?php echo $child->getName();?>">
                            <span class="brand-name"><?php echo $child->getName();?></span>
                        </a>
                    </li>

                    <?php   }?>
                </ul>
            </li>
            <?php endforeach; ?>
        </ul>
    </div>
    <script>

    $("ul ul").css("display", "none");

    $(".title").click(function(e) {
        e.preventDefault();
        $(this).next("ul").toggle(); 
    });
    </script>

Remove cache.

3
  • Thank you Rakesh. I managed to get it working by putting $j rather than just the $ symbol. So presumably it was some kind of conflict... Thanks again. Nov 28, 2016 at 11:19
  • Above code is working code, I have tested. You can use this code. Nov 28, 2016 at 11:20
  • You can accept as answer if your issue resolved. Thanks. Nov 28, 2016 at 11:21
0

Got this working by using $j to define the variable. Appears to be a conflict issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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