Instead of appending & removing the 'skills' content from your StoryRightSidebar ID'ed area I would suggest using the jQuery slideToggle() function to toggle the displaying of it.
1. Change your example to the following, it wraps your 'skills' content within a your-skills ID'ed div which uses a style attribute to cause it to be hidden by default. The <<link>> macro has been changed to call the jQuery function instead, repeatably clicking on it will cause the 'skills' to be shown/hidden with a sliding animation effect.
The following also use the $YourSkillsStyle story variable to tracking the current visible state of the #your-skills div, and an Attribute Directive to allow the setting of that div's style via the story variable.
<div id="StoryRightSidebar">
<<link "Your Skills">>
<<script>>
var $el = $('#your-skills').slideToggle({
'complete': function () {
State.variables.YourSkillsStyle = "display: " + $el.css('display') + ";"
}
});
<</script>>
<</link>>
<div id="your-skills" @style="$YourSkillsStyle">\
Math skill: $Mathskill
Literature skill: $Literatureskill
French skill: $Frenchskill
Physics skill: $Physicsskill
History skill: $Historyskill
Biology skill: $Biologyskill
Chemistry skill: $Chemistryskill
Geography skill: $Geographyskill
Art skill: $Artskill
Music skill: $Musicskill
Movie skill: $Movieskill
PE skill: $PEskill
Social skill: $Socialskill
</div>
</div>
2.Initialise the $YourSkillsStyle story variable within your project's StoryInit special passage.
<<set $YourSkillsStyle to "display: none;">>
edited 8-sep-2018: Added the ability to track current visual state of 'skills' content via the $YourSkillsStyle story variable