CODEWITHSUNDEEP
javascriptcssdom-events
Renai
Renai

Reputation: 195

JavaScript hide and show content

I was searching for a pure CSS answer to hiding and showing content but after no luck I have been playing around with a piece of JavaScript code. My question is below the code, as it may help you to see the code first.

      <script type="text/javascript">
    $(document).ready(function(){
            $('.text_container').addClass("visible");

        $('.text_container').click(function() {
            var $this = $(this);
            if ($this.hasClass("visible")) {
                    $(this).removeClass("visible").addClass("hidden");
            } else {
                    $(this).removeClass("hidden").addClass("visible");
            }
        });
    });
   </script>  


        <div id="services" class="text_container"> 
         <h4>SERVICES</h4>
             <div>
              <p>Loads of text blah blah blah</p>
             </div>
         </div>


         /* HIDE and SHOW content JavaScript function */
  .hidden div {display:none;}
  .visible div {display:block;} 

  .text_container {
      background-color: #39b54a;
     background-image: url("pattern2.png");
     border: 1px solid #777777;
    box-shadow: 0 1px 1px  inset, 0 0 40px rgba(0, 0, 0, 0.5) inset, 0 16px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 5px rgba(0, 0, 0, 0.6);
    color: #000000;
    padding: 5px;
    text-align: left;
    width: auto;

  }
  .text_container h4 {
     cursor: pointer;
  }
  .text_container div p {
      margin-bottom: 10px;
  }
  .visible > div {
   display: block;
   font-size: 17px;
    height: 100%;
  }

  #rating > div {
    clear: left;
    height: 260px;
  }
  /* end of HIDE and SHOW content javascript function */

Currently as expected the div with class = text_container area is clickable, so if a place a form in the child DIV when you select the form the content hides. I Would like to make only the H4 element clickable so clicking on the shown content will not hide the content.

I am useless at JavaScript and I imagine this requires rejigging the js.

Upvotes: 0

Views: 1844

Answers (6)

ʞᴉɯ
ʞᴉɯ

Reputation: 5594

Simply replace with 

$('.text_container h4').click( ...

Upvotes: 0

Johnny Craig
Johnny Craig

Reputation: 5002

change this:

      $('.text_container').click(function() {

to this:

      $('.text_container h4').click(function() {

Upvotes: 0

Joe
Joe

Reputation: 4930

You can use:

$('.text_container h4').click(function() {
    if($(this).hasClass("visible")) {
        $(this).removeClass("visible").addClass("hidden");
    } else {
        $(this).removeClass("hidden").addClass("visible");
    }
});

The content in the $(' ... ') is just like a CSS selector, so if you know CSS then it won't be a problem for you.

With CSS you could style that h4 element with:

.text_container h4 { color: #000000; }

and just the same, you can create a wrapped set with jQuery that selects it with:

$('.text_container h4')

Upvotes: 1

Joe
Joe

Reputation: 82614

This will accomplish your goal, example:

$(document).ready(function() {
    $('.text_container h4').addClass("visible");

    $('.text_container h4').click(function() {
        var $this = $(this).parent();
        if ($this.hasClass("visible")) {
            $this.removeClass("visible").addClass("hidden");
        } else {
            $this.removeClass("hidden").addClass("visible");
        }
    });
});

We are selecting the H4 and adding the click event to it, but then using .parent() to access to parent DIV.

Upvotes: 1

Finbarr
Finbarr

Reputation: 32126

I am not sure how someone will be able to click on an element with display: none. Also, replace this:

if ($this.hasClass("visible")) {
    $(this).removeClass("visible").addClass("hidden");
} else {
    $(this).removeClass("hidden").addClass("visible");
}

With this:

$(this).toggle();

Full code:

$(function() {
    $('.text_container h4').click(function() {
        $(this).parent().toggle(); // toggles between visible and hidden
    });
});

Upvotes: -1

Blazemonger
Blazemonger

Reputation: 92913

replace $('.text_container')... with $('.text_container h4')... or, better yet, $('h4').... if it's the only H4 element on the page.

Upvotes: 0

Related Questions