Q: How to remove an OnClicked class when the parent div is collapsed? I've accordion kind of menu strips. Initially all the menu will be collapsed. When a menu is clicked, that particular menu will expand for further options. When any other menu is clicked, the previous one will be collapsed. I'm able to do this. The problem goes here (after the code) :
HTML:
<script>
function showParagraph1(){
var x=document.getElementsByClassName("box1");
x[0].innerText="Hello JavaScript!"; 
}
function showParagraph2(){
var y=document.getElementsByClassName("box2");
y[0].innerText="Hello JavaScript!"; 
}
</script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph1()">
<div class="fillBlue"></div>
<div class="box1"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph2()">
<div class="fillBlue"></div>
<div class="box2"></div>
</div>

CSS
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;    
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}.box1{
width:100%;
height:auto;
background-color: #fff;
}
.box2{
width:100%;
height:auto;
background-color: #fff;
}.fillBlue{
height:10px;
background-color:blue;
}

JQuery
$(document).ready(function(){
    $(".selectionPanel").slideUp();
    $(".title").click(function(){
        $(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
    });
        })

JS FIDDLE here
When a menu is expanded, it shows further options with a button called view. It has an onclick event attached with it to display a text.
When ever any other menu is clicked, the expanded div gets collapsed. Again when the collapsed div is opened, it displays the text message that was added with button click event. 
I want to delete that particular class which displays text on button click as soon as it's parent div is collapsed.
To reproduce the problem in fiddle, 
1:Click on First Option
2:Click View Button
3:Click Second Option
4:Click First Option

I don't want to display Hello Javascript here. It has to be displayed only when clicked on View Button
I tried this, but it didn't work
$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp().removeClass(".selectionPanel");


A: You don't add any class, you just add text. So remove it with $("div[class^='box']").text('');.


$(document).ready(function() {
  $(".selectionPanel").slideUp();
  $(".title").click(function() {
    $(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp(400, function() {
      $("div[class^='box']").text('');
    });
  });
})
.title {
  width: 100%;
  height: auto;
  background-color: #aaa;
  padding: 5px 0px 5px 0px;
  margin-top: 10px;
  cursor: pointer;
}

.title p {
  font-family: verdana;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  color: #000;
}

.selectionPanel {
  height: auto;
  width: 100%;
  background-color: blue;
  padding: 10px 0;
  text-align: center;
  display: none;
}

.box1 {
  width: 100%;
  height: auto;
  background-color: #fff;
  margin: 10px 0 -10px;
}

.box2 {
  width: 100%;
  height: auto;
  background-color: #fff;
  margin: 10px 0 -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function showParagraph1() {
    $('.box1').text('Hello JavaScript!');
  }

  function showParagraph2() {
    $('.box2').text('Hello JavaScript!');
  }
</script>
<div class="title">
  <p>First Option</p>
</div>
<div class="selectionPanel">
  Select the Duration
  <select id="duration" required>
    <option value="30">last 1 month</option>
    <option value="60">last 2 months</option>
  </select><input type="button" class="button" value="View" onclick="showParagraph1()">
  <div class="box1"></div>
</div>
<div class="title">
  <p>Second Option</p>
</div>
<div class="selectionPanel">
  Select the Duration
  <select id="duration2" required>
    <option value="30">last 1 month</option>
    <option value="60">last 2 months</option>
    </select>
  <input type="button" class="button" value="View" onclick="showParagraph2()">
  <div class="box2"></div>
</div>



A: If this is the behavior you're looking for I'll explain what I've done.
updated to use.empty instead of .text('')


$(".title").click(function() {
  $('.selectionPanel').not($(this).next('.selectionPanel')).slideUp();
  $(this).next(".selectionPanel").slideToggle("slow");
  $('input').closest('.selectionPanel').find('.box').empty();
});

$("input").click(function() {
  if ($(this).val() === 'View') {
    $(this).closest('.selectionPanel').find('.box').text('Hello JavaScript!');
  }
})
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px; 
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}.box1{
width:100%;
height:auto;
background-color: #fff;
}
.box2{
width:100%;
height:auto;
background-color: #fff;
}.fillBlue{
height:10px;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View">
<div class="fillBlue"></div>
<div class="box box1"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View">
<div class="fillBlue"></div>
<div class="box box2"></div>
</div>


Fiddle
https://jsfiddle.net/Hastig/3h8kLbak/10/

A: I changed your showParagraph you don't need 2 classes .box1 and .box2. You need only 1 class don't copy paste styles. if it's basicly the same thing ther's no point assigning some different name. Showparagraph now sends the parent div to the function and the function find the .box element inside it and puts the html. To show it or hide it it adds css display:block or display:none depending on the situation.   
<script>
function showParagraph(el){
var el = $(el).find(".box");
el.css("display","block");
el.text("Hello JavaScript!"); 
}

$(document).ready(function(){
    $(".selectionPanel").slideUp();
    $(".title").click(function(){
        $(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
        $(".box").css("display", "none");
    });
        })
</script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph(this.parentNode)">
<div class="fillBlue"></div>
<div class="box"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph(this.parentNode)">
<div class="fillBlue"></div>
<div class="box"></div>
</div>

<style>
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;    
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}

.box{
width:100%;
height:auto;
background-color: #fff;
}

.fillBlue{
height:10px;
background-color:blue;
}

</style>


A: I've updated your fiddle to work like you want.
I didn't want to change your code too much but I've did a few changes.
First of all I think that it's better to have just one function for the showingParagraph action. 
I've modified to receive the box to show as a param (and I'm using ID's, check also the css for the box styling)
function showParagraph(box){
  var x = document.getElementById(box);
  x.innerText = "Hello JavaScript!"; 
}

You could do the same for  the innerText.
Then the jQuery part of the toggle looks like this now:
$(document).ready(function(){
  $(".selectionPanel").slideUp();
  $(".title").click(function() {                      
    $(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
    $('.box').each(function() {
      $(this)[0].innerText = '';
    })
  })
});

You replace the innerText of each box for an empty string.
You can check the working fiddle here https://jsfiddle.net/3h8kLbak/8/
