Click promoted links tile to reveal another webpart

Question

I have two sets of promoted link tiles. I've placed each set of tiles in their own webpart on a webpart page.

What I would like to do is:
1. Hide the second set of tiles, and
2. Reveal the second set of tiles when the first link of the first set is clicked,
3. Hide the second set again, when the first link of the first set is clicked again (this is optional, though).

Essentially, I want to toggle webpart2, when link1 of webpart1 is clicked.

This is the code that I have in a CEWP. It hides webpart2 correctly, but won't reveal when I click the other link the first link in webpart1.

<script type="text/javascript" src=".../.../SiteAssets/jquery-2.1.3.min.js"></script>

<script language="javascript">

$(document).ready(function() { 

$("div#promotedlinksbody_WPQ3").hide();

});

$(function () {

    $("a[id^=Tile_WPQ]").each(function () {

        $(this).click(function () {

            var linkTitle = $(this).find('li[title]').attr('id');
            if (linkTitle == "Tile_WPQ2_1_1")

             {
                             $("div#promotedlinksbody_WPQ3").show();
                            event.returnValue = false;
             }
          });
    });
});
</script>

What am I doing wrong?

Answer 1

I'm using the same functionality, however, my "first link" (as you've described) are in a "SharePoint 2013" Promoted Links list. I believe the proper linkTitle should be WPQ2_1_6 not WPQ2_1_1 as you've shown. Think I found this via F12 but can't remember now.

Here's a copy of what I have which does a ton of show hide:

<script type="text/javascript" src="[site collection]/[sitename]/Style%20Library/script/jquery-1.8.1.min.js"></script>
<script language="javascript">
    $(document).ready(function() {
    $("div#WebPartWPQ4").hide();
    $("div#WebPartWPQ5").hide();
    $("div#WebPartWPQ6").hide();
    $("div#WebPartWPQ7").hide();
    $("div#WebPartWPQ8").hide();
    $("div#WebPartWPQ11").hide();
    });
    $(function () {
        $("a[id^=Tile_WPQ]").each(function () {
            $(this).click(function () {
                var linkTitle = $(this).find('li[title]').attr('id');
                if (linkTitle == "Tile_WPQ2_1_6")
                 {
                    $("div#WebPartWPQ4").show();
                    $("div#WebPartWPQ5").hide();
                    $("div#WebPartWPQ6").hide();
                    $("div#WebPartWPQ7").hide();
                    $("div#WebPartWPQ8").hide();
                    $("div#WebPartWPQ11").hide();
                    event.preventDefault();
                 }
                if (linkTitle == "Tile_WPQ2_2_6")
                {
                    $("div#WebPartWPQ4").hide();
                    $("div#WebPartWPQ5").hide();
                    $("div#WebPartWPQ6").show();
                    $("div#WebPartWPQ7").hide();
                    $("div#WebPartWPQ8").hide();
                    $("div#WebPartWPQ11").hide();
                    event.returnValue = false;
                }
                if (linkTitle == "Tile_WPQ3_4_6") {
                    $("div#WebPartWPQ4").hide();
                    $("div#WebPartWPQ5").show();
                    $("div#WebPartWPQ6").hide();
                    $("div#WebPartWPQ7").hide();
                    $("div#WebPartWPQ8").hide();
                    $("div#WebPartWPQ11").hide();
                    event.returnValue = false;
                }
                if (linkTitle == "Tile_WPQ3_5_6") {
                    $("div#WebPartWPQ4").hide();
                    $("div#WebPartWPQ5").hide();
                    $("div#WebPartWPQ6").hide();
                    $("div#WebPartWPQ7").show();
                    $("div#WebPartWPQ8").hide();
                    $("div#WebPartWPQ11").hide();
                    event.returnValue = false;
                }
                if (linkTitle == "Tile_WPQ3_6_6") {
                    $("div#WebPartWPQ4").hide();
                    $("div#WebPartWPQ5").hide();
                    $("div#WebPartWPQ6").hide();
                    $("div#WebPartWPQ7").hide();
                    $("div#WebPartWPQ8").show();
                    $("div#WebPartWPQ11").hide();
                    event.returnValue = false;
                }
                });
            });
        });

Anyway, you get the idea. The format is WPQ#_#_6.