<div id="app">
  <div class="container">
    <div class="tab-container">
      <h1 class="text-center">Vue.js Tabs</h1>
  <div class="row">
      <div class="col-md-12 internalPadding">
        <div class="blueBar" @click="isShow['Star'] = !isShow['Star']" :class="{'red': isShow['Star']}">
          <div class="d-flex">
            <h2><i class="fab fa-jedi-order"></i>&nbsp; &nbsp;Star Wars </h2>
            <div class="ml-auto">
              <i class="fas fa-plus ml-auto"></i>
            </div>
          </div>
        </div><!-- End BlueBar -->
      </div><!-- End col -->
    </div><!-- End Row -->
    <transition name="slide">
      <div class="row content internalPadding" v-if="isShow['Star']">
        <div class="col-12">
        <h2><i class="fab fa-jedi-order"></i>&nbsp; &nbsp;Star Wars</h2>
 <p>Star Wars is an American epic space-opera media franchise created by George Lucas. The franchise began with the eponymous 1977 film and quickly became a worldwide pop-culture phenomenon. The original film, later subtitled Episode IV – A New Hope, was followed by the sequels Episode V – The Empire Strikes Back (1980) and Episode VI – Return of the Jedi (1983), forming what is collectively referred to as the original trilogy. A prequel trilogy was later released, consisting of Episode I – The Phantom Menace (1999), Episode II – Attack of the Clones (2002) and Episode III – Revenge of the Sith (2005). Years later, a sequel trilogy began with Episode VII – The Force Awakens (2015), continued with Episode VIII – The Last Jedi (2017), and will conclude with Episode IX – The Rise of Skywalker (2019).[1] The first eight films were nominated for Academy Awards (with wins going to the first two released) and were commercially successful. Together with the theatrical anthology films Rogue One (2016) and Solo: A Star Wars Story (2018), the combined box office revenue of the films equates to over US$9 billion,[2] and is currently the second-highest-grossing film franchise.[3]</p>
        </div><!-- End Col -->
        <div class="col-md-12 internalPadding" style="margin-top: 15px;">
          <div @click="isShow['Star'] = !isShow['Star']">
            <div class="d-flex">
            <button class="ml-auto">
              <slot>Hide</slot>
            </button>
          </div>
        </div>
        </div><!-- End Col -->
      </div><!-- End Row -->
    </transition>
     <div class="row">
      <div class="col-md-12 internalPadding">
        <div class="blueBar" @click="isShow['Diehard'] = !isShow['Diehard']" :class="{'red': isShow['Diehard']}">
          <div class="d-flex">
            <h2><i class="fas fa-sleigh"></i>&nbsp; &nbsp;Die Hard </h2>
            <div class="ml-auto">
              <i class="fas fa-plus ml-auto"></i>
            </div>
          </div>
        </div><!-- End BlueBar -->
      </div><!-- End col -->
    </div><!-- End Row -->
    <transition name="slide">
      <div class="row content internalPadding" v-if="isShow['Diehard']">
        <div class="col-12">
        <h2><i class="fas fa-sleigh"></i>&nbsp; &nbsp;Die Hard</h2>
  <p>Die Hard is a 1988 American action thriller film[2] directed by John McTiernan and written by Steven E. de Souza and Jeb Stuart, based on Roderick Thorp's 1979 novel Nothing Lasts Forever. It was produced by the Gordon Company and Silver Pictures, and distributed by 20th Century Fox. The film follows off-duty New York City Police Department officer John McClane (Bruce Willis) who is caught in a Los Angeles skyscraper during a heist led by Hans Gruber (Alan Rickman).</p>

<p>Made for $28 million, Die Hard grossed over $140 million theatrically worldwide, with the film turning Willis into an action star, and became a metonym for an action film in which a lone hero fights overwhelming odds. The film's success created the Die Hard franchise, which includes four sequels, a number of video games, and a comic book, and later in 2017 was selected for preservation in the United States National Film Registry. Die Hard has been named one of the best action and Christmas-themed films ever made.[3][4][5] The film also ranks No. 20 on Empire's 2017 list of the 100 greatest movies of all time.[6]</p>
        </div><!-- End Col -->
        <div class="col-md-12 internalPadding" style="margin-top: 15px;">
          <div @click="isShow['Diehard'] = !isShow['Diehard']">
            <div class="d-flex">
            <button class="ml-auto">
              <slot>Hide</slot>
            </button>
          </div>
        </div>
        </div><!-- End Col -->
      </div><!-- End Row -->
    </transition>
    
         <div class="row">
      <div class="col-md-12 internalPadding">
        <div class="blueBar" @click="isShow['Predator'] = !isShow['Predator']" :class="{'red': isShow['Diehard']}">
          <div class="d-flex">
            <h2><i class="fab fa-reddit-alien"></i>&nbsp; &nbsp;The Predator </h2>
            <div class="ml-auto">
              <i class="fas fa-plus ml-auto"></i>
            </div>
          </div>
        </div><!-- End BlueBar -->
      </div><!-- End col -->
    </div><!-- End Row -->
    <transition name="slide">
      <div class="row content internalPadding" v-if="isShow['Predator']">
        <div class="col-12">
        <h2><i class="fab fa-reddit-alien"></i>&nbsp; &nbsp;The Predator</h2>
  <p>The Predator is a 2018 American science fiction action film directed by Shane Black and written by Black and Fred Dekker. It is the fourth installment in the Predator film series, following Predator (1987), Predator 2 (1990), and Predators (2010), and makes reference to the events of the crossover films Alien vs. Predator (2004) and Aliens vs. Predator: Requiem (2007). Black had a supporting role in the original film, while John Davis returns as producer from the first three installments. The film stars Boyd Holbrook, Trevante Rhodes, Jacob Tremblay, Keegan-Michael Key, Olivia Munn, Thomas Jane, Alfie Allen, and Sterling K. Brown and follows a group of PTSD-afflicted soldiers who must fight off an invading pair of Predators.</p>

<p>Talks of a new Predator installment began in June 2014, with Black being confirmed as writer and director; much of the cast signed on between October 2016 and January 2017. Filming took place in British Columbia from February to June 2017, with the entire climax being re-written and re-shot in July 2018 following poor test screenings.</p>

<p>The Predator premiered at the Toronto International Film Festival on September 6, 2018, and was theatrically released in the United States on September 14, 2018, by 20th Century Fox, in IMAX and Dolby Cinema, as well as standard formats.[4] The film grossed $160 million worldwide.</p>
        </div><!-- End Col -->
        <div class="col-md-12 internalPadding" style="margin-top: 15px;">
          <div @click="isShow['Predator'] = !isShow['Predator']">
            <div class="d-flex">
            <button class="ml-auto">
              <slot>Hide</slot>
            </button>
          </div>
        </div>
        </div><!-- End Col -->
      </div><!-- End Row -->
    </transition>
    
    </div><!-- End tab container -->
  </div><!-- End Container -->
</div><!-- End App -->