How to toggle show/hide div when text is clicked

Question

I have implemented some text with HTML and CSS but I want to hide the text when it is clicked.

On the below example when the view contact details is clicked it should be displayed the text and also hide the text when the same view contact details is clicked.

.fWrap .contactInfo.tableStr {
    margin-top: 10px;
    overflow: hidden;
}
.tableStr {
    clear: both;
}
.inWrap * {
    box-sizing: border-box;
    }
    .jdRow {
    float: left;
    margin-bottom: 15px;
    width: 100%;
}

.jdCell {
    font-weight: 700;
    width: 120px;
    margin-right: 20px;
    float: left;
    text-align: right;
    display: inline-block;
}

.jdCell2 {
    float: left;
    max-width: 83%;
    color: #444;
    display: block;
}
.inWrap * {
    box-sizing: border-box;
}

<div class="fWrap posR">
    <a href="javascript:void(0)" class="contDetail f12" id="contDetail">View Contact Details</a>
    <div class="contactInfo tableStr" id="contactInfo" style="display: block;">
        <div class="jdRow">
            <span class="jdCell">Company Name</span>
            <span class="jdCell2">Marvist Digital Marketing KPO</span>
        </div>
        <div class="jdRow">
            <span class="jdCell">Executive Name</span>
            <span class="jdCell2">Recruiting Department</span>
        </div>
        <div class="jdRow">
            <span class="jdCell">Website</span>
            <span class="jdCell2 tWrap">
                <a href="http://www.marvist.co.in" target="_blank" rel="nofollow">http://www.marvist.co.in</a>
            </span>
        </div>
        <div class="jdRow">
            <span class="jdCell">Email</span>
            <span class="jdCell2">jobs@marvist.co.in</span>
        </div>
    </div>
    <div class="shrNprint"></div>
</div>

score 1 · Accepted Answer · edited Jul 19 '16 at 17:24

Using Jquery, use the click event with toggle() function that show/hide elements :

$('body').on('click','#contDetail', function(){
    $('#contactInfo').toggle();
})

Hope this helps.

$('body').on('click','#contDetail', function(){
  $('#contactInfo').toggle();
})

.fWrap .contactInfo.tableStr {
  margin-top: 10px;
  overflow: hidden;
}
.tableStr {
  clear: both;
}
.inWrap * {
  box-sizing: border-box;
}
.jdRow {
  float: left;
  margin-bottom: 15px;
  width: 100%;
}

.jdCell {
  font-weight: 700;
  width: 120px;
  margin-right: 20px;
  float: left;
  text-align: right;
  display: inline-block;
}

.jdCell2 {
  float: left;
  max-width: 83%;
  color: #444;
  display: block;
}
.inWrap * {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fWrap posR">
  <a href="javascript:void(0)" class="contDetail f12" id="contDetail">View Contact Details</a>
  <div class="contactInfo tableStr" id="contactInfo" style="display: block;">
    <div class="jdRow">
      <span class="jdCell">Company Name</span>
      <span class="jdCell2">Marvist Digital Marketing KPO</span>
    </div>

    <div class="jdRow">
      <span class="jdCell">Executive Name</span>
      <span class="jdCell2">Recruiting Department</span>
    </div>

    <div class="jdRow">
      <span class="jdCell">Website</span>
      <span class="jdCell2 tWrap"><a href="http://www.marvist.co.in" target="_blank" rel="nofollow">http://www.marvist.co.in</a></span>
    </div>
    <div class="jdRow">
      <span class="jdCell">Email</span>
      <span class="jdCell2">jobs@marvist.co.in</span>
    </div>

  </div>
  <div class="shrNprint">

How to toggle show/hide div when text is clicked

1 Answers1