0 votes
by (370 points)

Ok now i can use append to show content on the same page as the link.But now i want the contents dissapear as i click that same link.What should i do?

Here's my code

<span id="StoryRightSidebar">
<<link "Your Skills">>
<<append "#StoryRightSidebar">>

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

<<linkreplace "Your Skills">>
<</linkreplace>>

<</append>>
<</link>>
</span>

 

1 Answer

+1 vote
by (159k points)
edited by

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 

by (370 points)
A P P R E C I A T E !
by (370 points)
is there a way to make the contents in right sidebar stand still while changing passage?Everytime i change the passage they close themselves
by (159k points)
I have updated the example supplied with my original answer to use a story variable to track the current visible state of the 'skills' content, it also now includes a new example on how to initialise that story variable.

Please read the answer again and replace/update your existing code as necessary.
by (370 points)
Thanks.But is there a way to make the links in the sidebar to close at the beginning?I find that it is already open at the beginning and that just looks messy
by (370 points)
I'm sorry for bothering you again but i need the code you gave me at the very beginning for this question.Can you send it to me again?
...