Show hide separate divs with jQuery

Question

With my inexperience in jQuery, I'm finding the simplest tasks difficult.

What I attempt to do is show/hide certain messages when a certain icon is clicked. This is my HTML:

<div class="container">
    <div class="row">
        <div class ="col-md-2 pov_icon">
            <div class="pov_icon_small" value="measure">
                <i class="fa fa-clock-o"></i>
            </div>
            <div class="pov_title_small">
                MEASURE
            </div>
        </div>

        <div class ="col-md-2 pov_icon">
            <div class="pov_icon_large" value="locate">
                <i class="fa fa-map-marker"></i>
            </div>
            <div class="pov_title_large">
                LOCATE
            </div>
        </div>

        <div class ="col-md-2 pov_icon">
            <div class="pov_icon_small" value="inform">
                <i class="fa fa-commenting"></i>
            </div>
            <div class="pov_title_small">
                INFORM
            </div>
        </div>

        <div id="measure" style="display:none" class="pov_description">
            <p> Message MESSAGE</p>
        </div>
        <div id="locate" class="pov_description">
            <p> Message LOCATE</p>
        </div>
        <div id="inform" style="display:none" class="pov_description">
            <p> Message INFORM</p>
        </div>

    </div>
</div>

My JavaScript code that changes the pov icon/title classes works and is currently here:

$('.pov_icon_small , .pov_icon_large').on('click', function () {
    $('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
    $('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small'); 
    $(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
    $(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});

What I aim to do, is display a certain message (eg Message Measure) when the a certain icon pov_icon_small value="measure" is clicked while keeping the others hidden. When the user clicks another icon; that respective message will be displayed and the others will be hidden :

$(document).ready(function(){
    $('input[.pov_icon_small]').click(function(){
        if($(this).attr("value")=="measure"){
            $(".pov_description").not("#measure").hide();
            $("#measure").show();
        }
        if($(this).attr("value")=="locate"){
            $(".pov_description").not("#locate").hide();
            $("#locate").show();
        }
        if($(this).attr("value")=="inform"){
            $(".pov_description").not("#inform").hide();
            $("#inform").show();
        }
    });

The message-linking JS code doesn't seem to work. Am I doing a small error here? Or should I be preparing the code in a completely different way?

Answer 1

1st : you just need to get a value and convert it to id ..

2nd: like @juvian mentioned $('input[.pov_icon_small]') is not a valid selector

3rd .pov_icon_small its a div not an input so you can use $('div.pov_icon_small') instead

4th: .pov_icon_small doesn't have any value attribute .. .pov_title_small and .pov_title_large those has the value attribute

$(document).ready(function(){
  $('div.pov_title_small , div.pov_title_large').click(function(){
    var ThisValue = $.trim($(this).attr('value'));
    $(".pov_description").not("#"+ThisValue).hide();
    $("#"+ThisValue).slideToggle()
  });
});

Working Demo

if you need to control it from .pov_icon you have 2 ways

1st: put a value attribute in .pov_icon_small/large

2nd: you can use

$('div.pov_icon_small , div.pov_icon_large').click

and

var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));

Answer 2

Theres two issues, first your CSS selector input[.pov_icon_small] is not valid. The second is that you are attaching the click function to pov_icon_small which do not have enough height or width for a user to click. I've adjusted the HTML so this binds to the pov_title_small class instead.

You'll want to attach your click function to items have a value, then pass that value as the selector. For pov_title_small I've changed the attribute value to data-value , then the click function uses that to select the ID you want to display. Here is the code:

HTML:

<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
 <div class="pov_icon_small">
  <i class="fa fa-clock-o"></i>
 </div>
 <div class="pov_title_small" data-value="measure">
   MEASURE
 </div>
</div>

<div class ="col-md-2 pov_icon">
 <div class="pov_icon_large">
  <i class="fa fa-map-marker"></i>
 </div>
 <div class="pov_title_large" data-value="locate">
   LOCATE
 </div>
</div>

<div class ="col-md-2 pov_icon">
 <div class="pov_icon_small">
  <i class="fa fa-commenting"></i>
 </div>
 <div class="pov_title_small" data-value="inform">
   INFORM
 </div>
</div>

<div id="measure" style="display:none" class="pov_description">
 <p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
 <p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
 <p> Message INFORM</p>
</div>

Javascript:

$(document).ready(function(){
    $('[data-value]').bind('click', function(){
        $('.pov_description').hide();
        $('#'+$(this).attr('data-value')).show();
    });
});

You can see it working in this JS Fiddle: http://jsfiddle.net/h97fg75s/