Pure CSS Collapse/Expand Div

Expand Collapse DIV content using pure CSS or a combo of CSS and JS

If you can use javascript or jQuery then you could toggle a class on the parent element:

$(".expand-control-icon").on("click", function(){
    $(".wikiContentBody").toggleClass("active");
});

Then in your CSS something like this:

.wikiContentBody.active div.expand-content {
  display: block;
}

As far as changing the img src via CSS what you could do is try wrapping the img in a div with position: relative. Then add a psuedo element with position: absolute and set the background-image to the secondary url you provided and set display: none. Once parent element has the class of active then display the pseudo element over the original image:

.expand-control-icon > div {
    position: relative;
    z-index: 1;
}

.expand-control-icon > div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("your other url");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: none;
    z-index: 2;
}


.wikiContentBody.active .expand-control-icon > div::after {
    display: block;
}

You might need to finesse it a little more than this, but could be a good starting point.

Expand and collapse with css

.fieldsetContainer {    height: 0;    overflow: hidden;    transition: height 400ms linear;}
#toggle {    display: none;}
#toggle:checked ~ .fieldsetContainer {    height: 50px;}
label .arrow-dn { display: inline-block; }label .arrow-up { display: none; }
#toggle:checked ~ label .arrow-dn { display: none; }#toggle:checked ~ label .arrow-up { display: inline-block; }

<div class='showHide'>    <input type="checkbox" id="toggle" />        <label for="toggle">        <span class='expand'>            <span class="changeArrow arrow-up">↑</span>            <span class="changeArrow arrow-dn">↓</span>            Line expand and collapse        </span>    </label>        <div class="fieldsetContainer">        <fieldset id="fdstLorem">            Lorem ipsum...        </fieldset>    </div></div>

Expand/collapse right menu in pure html/css

I used the following to achieve your desired effect:

.filter-menu {
  ...
  display: flex;
  flex-direction: row-reverse;
}

This will arrange the elements in inverse order, placing the yellow first (left)

input:checked~.filter-content {
  flex-grow: 1;
}

This will make the yellow div fill the rest of the space when visible

label {
  ...
  padding-right: 100px;
}

I also gave the label a right padding to place it more in the middle, like in the picture. You can adjust this 100px to whatever suits your needs. Note that you can click in this whitespace to toggle the menu. If you do not want this, use margin-right: 100px; instead.

// Import stylesheets
//import './style.css';

// Write Javascript code!
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;

h1,
h2 {
  font-family: Lato;
}

.filter-menu {
  border-radius: 0px 8px 8px 0px;
  background-color: #ffffff;
  border-color: #71bccd;
  box-shadow: 0 2px 8px 0 rgba(55, 58, 60, 0.2);
  font-size: 14px;
  min-width: 62px;
  display: flex;
  flex-direction: row-reverse;
}

.filter-content {
  width: 0px;
  overflow: hidden;
}

input#menu {
  display: none;
}

label {
  padding-top: 10vh;
  writing-mode: tb-rl;
  padding-right: 100px;
}

.filter-menu label {
  display: block;
  cursor: pointer;
}

input:checked~.filter-content {
  flex-grow: 1;
}

<div id="app"></div>

<div class="filter-menu">
  <input type="checkbox" id="menu">
  <label for="menu">CLICK TO EXPAND</label>
  <div class="filter-content" style="background-color: #ffd813">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>

Expand and collapse text with pure CSS?

OnClick events have to involve a little bit of JS.

Else, here's a nifty little hack by Chris Coyier - http://css-tricks.com/the-checkbox-hack/

Collapsible text height in pure css

You can try using max-height instead of height.

#expand {  max-height: 0px;  width: 0px;  overflow: hidden;  transition: max-height 0.5s, width 0.5s ease-in-out;  background: #000000;  color: #FFF;}
input {  display: none;  visibility: hidden;}
input:checked+label+#expand {  max-height: 150px;  width: 600px;}
#toggle:checked~label::before {  content: "-";}

/* useless styling */
main {  background: #EEE;  width: 100px;  margin: 20px auto;  padding: 10px 0;  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);}
section {  padding: 0 20px;}
label {  display: block;  padding: 0.5em;  text-align: center;  border-bottom: 1px solid #CCC;  color: #666;}
label:hover {  color: #000;}
label::before {  font-family: Consolas, monaco, monospace;  font-weight: bold;  font-size: 15px;  content: "+";  vertical-align: text-top;  display: inline-block;  width: 20px;  height: 20px;  margin-right: 3px;  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);}

<main>  <input id="toggle" type="checkbox" />  <label for="toggle">Hidden Kitten</label>  <div id="expand">    <section>      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>    </section>  </div>
  <input id="toggle1" type="checkbox" />  <label for="toggle1">Hidden Kitten</label>  <div id="expand">    <section>      <p>mew</p>    </section>  </div></main>