royalSlider: How to De- and Activate slides

Resources

I am using royalSlider as a plugin. Here is a quick link to the documentation & API.

On my site the slider works as height: 100%; width: 100% fullscreen slider.

Content Structure

The structure of my site is quite simple: I have slides that I use as cover, lets call them .cover, each followed by a slide containing more information. Lets call them .sub.

Content Cover Nr. 1
  Sub Content Nr. 1
Content Cover Nr. 2
  Sub Content Nr. 2
Content Cover Nr. 3
  Sub Content Nr. 3
Content Cover Nr. 4
  Sub Content Nr. 4

If it is easier to understand, you can check the first four slides of the live site right here.

---

What I would like to do

Every slide containing Sub Content should be disabled (= not visible). Again, lets call them .sub.

On every .cover-Slide there is a button, which should toggle its .sub-Slide to be enabled or disabled again. Like .slideToggle for the whole slide.

First approaches

First of initialize slider as usual with starting slides and save it's object.

var sliderInstance = $('.royalSlider').royalSlider({
    optionname: 'optionvalue'
}).data('royalSlider');

There is appendSlide public method, it accepts two parameters - html slide object, and optional index where slide should be added. If you don't pass index, slide will be added to the end.

// Adding simple slide after 3rd image:
sliderInstance.appendSlide('<div class="rsContent">Quicktest</div>', 3);

// remove 4th slide:
sliderInstance.removeSlide(3);

I have although written some hints I think could be useful inside the following jsfiddle demo, but I am not able to think outside the box I am stuck in.

» Minified JS Fiddle Demo to work with

» royalSlider Documentation & API