2

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?

  • What is "the other link" referring to in your question? – Dinerdo Jul 24 '15 at 15:42
  • It's the first link in the first webpart. Sorry for the confusion; will update the questions. – Kaylee Chatham Jul 24 '15 at 15:48
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.

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.