Change visibility of element if another element has a class

Question

I am trying to create some basic functionality using jQuery.

I have 5 containers, when clicking on one of these containers, a paragraph below needs to show. When clicking on another container afterwards, I would like another paragraph to show. (When clicking on step 3, i want paragraph 3 to show for example).

I have tried creating a click function, which finds if the element has an active class, then to show X numbered paragraph. However I don't know how i can hide all other paragraphs to show only just the one. I would also like these paragraphs to fade in.

Here is my jsfiddle:

$("div").click(function() {
        $(this).addClass('active').siblings().removeClass('active');
    });

	$(".step1").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text1" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

	$(".step2").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text2" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

	$(".step3").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text3" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

	$(".step4").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text4" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

	$(".step5").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text5" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

.text1, .text2, .text3, .text4, .text5 {
  		display: none;
  	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step1 active">
	<h3>Step 1</h3>
</div>

<div class="step2">
	<h3>Step 2</h3>
</div>

<div class="step3">
	<h3>Step 3</h3>
</div>

<div class="step4">
	<h3>Step 4</h3>
</div>

<div class="step5">
	<h3>Step 5</h3>
</div>

<p class="text1">Ius cu iusto prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text2">legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text3">Prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text4">Legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text5">Set, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>

Answer 1

Try changing slibings selector

In your case $(this).siblings.hide(); $(this) is a button not text

... 

$(".step1").click(function() {
    if($(this).hasClass("active")){
        $(".text1").show("fast");
        $(".text1").siblings("p").hide();
    }
});

$(".step2").click(function() {
    if($(this).hasClass("active")){
        $(".text2").show("fast");
        $(".text2").siblings("p").hide();
    }
});

....

https://jsfiddle.net/f4w0zos7/24/

Answer 2

Please try this $("p:not(.text2)").hide();instead $(".text2").siblings('p').hide(); below is jQuery snippet:

$(".step1").click(function() {
        $( ".text1" ).fadeIn();
         $("p:not(.text1)").hide();

});

$(".step2").click(function() {
    $( ".text2" ).fadeIn();
         $("p:not(.text2)").hide();
});

$(".step3").click(function() {
    $( ".text3" ).fadeIn();
         $("p:not(.text3)").hide();
});

$(".step4").click(function() {
    $( ".text4" ).fadeIn();
         $("p:not(.text4)").hide();
});

$(".step5").click(function() {
    $( ".text5" ).fadeIn();
         $("p:not(.text5)").hide();
});

Answer 3

This is a much less repetitive way to achieve what you want.

The steps and the textboxes all have the same class (to denote what type of item they are), but have different data-attributes to link them together by a common ID.

$(function() {
  $(".step").click(function() {
      var textID = $(this).data("textid");
      $(".text").hide();
      var text = $(".text[data-textid=" + textID + "]").show("fast");
  });
});

.text
{
  display: none;
  padding: 5px;
  border: 1px solid #cccccc;
}
.step { cursor:pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="step" data-textID="1">
  <h3>Step 1</h3>
</div>

<div class="step" data-textid="2">
  <h3>Step 2</h3>
</div>

<div class="step" data-textid="3">
  <h3>Step 3</h3>
</div>

<div class="step" data-textid="4">
  <h3>Step 4</h3>
</div>

<div class="step" data-textid="5">
  <h3>Step 5</h3>
</div>

<p class="text" data-textid="1">Ius cu iusto prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat
  singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text" data-textid="2">legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His
  at rebum postulant forensibus.</p>
<p class="text" data-textid="3">Prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis
  ut. His at rebum postulant forensibus.</p>
<p class="text" data-textid="4">Legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His
  at rebum postulant forensibus.</p>
<p class="text" data-textid="5">Set, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis
  ut. His at rebum postulant forensibus.</p>