1

I am trying to have a section of text on a Wiki page hidden by default, but when clicking on a link/header the text is then unhidden/expanded.

I have searched online and thought I was getting somewhere, but SharePoint seems to be stripping out part of my code and stopping it working.

What I have tried:

  • Added a CEWP to the bottom of the page. In it is a style tag containing hidden and unhidden references. Also, the CEWP contains the script which dynamically changes which style is applied to the div section.
  • Edited the HTML in the Wiki page so that the section of text to be hidden/shown has a div id and refers to the CSS class.
    • Added code to the header which i want to be clicked on to show/hide the section: <a href="#" onclick="unhide('DivID');">

This seems to work fine when the Wiki page is still in edit mode. However, as soon as I save the page it strips out the onclick="unhide('DivID');" part for reasons unknown.

Does anyone have any idea on how to get around this? Or am I approaching this simple functionality in the wrong way? There's load of guides online about hiding/showing webparts, but what I am wanting to do is simply about doing this for blocks of text.

Update It's still not working, but everyone's help is much apprecaited. I'm sure it's something silly i'm doing wrong, so any more pointers gratefully received. To clarify what i have tried so far:

  • Added class="display:none" into the DIV tag for the text block that i want to show/hide.
  • Added a CEWP to the bottom of the wiki page. This is linked to a text file stored on the site's library.
  • This text file has the following code in it: enter image description here
1

You can try to place all the "behaviour" to javascript (should avoid inline handlers). Just add specific class to the trigger anchor and then in js write handler like something

document.getElementsByClassName("myTrigger")[0].onclick = function(){ unhide('DivID'); return false; }

Sharepoint page content editor is buggy in such things. I hope it will help you

  • Thanks for your reply. I have removed the onlick part from the anchor tag, and replaced it with class="myTrigger". I have added your suggested code within the script taga in the CEWP. Not working though. Am i just to copy/paste your code into the the existing script tags? Or should they be encompassed by their own script tags? – AndyFlems Aug 7 '14 at 11:00
  • First correction: don't muddle style="display:none" and class="someElementClass". Second correction: You have 2 elements – a "trigger" anchor and a div (containing section of text). Also check whether you include jQuery library in your page. So handler will looks like $("#myAnchor").click(function() { … $("myDiv") … }); After saving the page check the resulting code (did SP cut your addings or not) with context menu 'View Page Code' – Ilya Aug 8 '14 at 5:21
1

I think you can make it happen using jQuery:

  1. Whatever element you want to expand/collapse needs to have a display:none; in its CSS style. Let's say you have a DIV:
Some cool text
  1. Now its style should have the display:none in it:

    #myDiv { display:none; }
    
  2. Using jQuery you can right a simple click event function

    $("#myDiv").click(function() {
    var isHidden = $("#myDiv:hidden");
    if (isHidden) {
        $("#myDiv").show();
    }
    else {
        $("#myDiv").hide();
    }
    });
    

At this point, that is all you need to show/hide the div.

You can easily add animation to it by simply adding one word:

$("#myDiv").show("slow");
  • This looks like just the ticket. I'm getting a bit stuck on how to implement it though. What do i do for step one to make sure that display:none; in its CSS style? – AndyFlems Aug 7 '14 at 13:37
  • Look for the DIV where the text is located. If it doesn't have display:none you have to add it – el94 Aug 7 '14 at 13:39
  • Ok, i have added class="display:none" into the div tag for the section that i want to expand/collapse. Still not working. I will update the original question with everything i have done so far. – AndyFlems Aug 7 '14 at 13:48
  • Someone asked a similar question on another thread. I used your answer. Just wanted to pass on my gratitude. – Nullldata May 25 '16 at 8:31

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.