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

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.

| improve this answer | |
  • 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. – YorkieMagento Nov 28 '16 at 11:19
  • Above code is working code, I have tested. You can use this code. – Rakesh Jesadiya Nov 28 '16 at 11:20
  • You can accept as answer if your issue resolved. Thanks. – Rakesh Jesadiya Nov 28 '16 at 11:21
0

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

| improve this answer | |

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.