Jquery Show Hide with attribute


Tags: javascript,jquery,html,css

Problem :

How to get value from custom attribute to be used in if else condition? I want to switch button between show & hide . if show button clicked it will hiden and the hide button showed. And also the same for opposites. So i can do show hide for my divs.

Here's my codes

<div class="wrapper">
<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>
<div class="event_down" id="event_down1" style="display:none">
Content 1
</div>
<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>

<div class="event_down" id="event_down2" style="display:none">
    Content 2
</div>

<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>

<div class="event_down" id="event_down3" style="display:none">
    Content 3
</div>
</div>

CSS:

.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}

JS :

$('.show_detail').click(function(){
        var atribut_show = $('.show_detail').attr('target');
        var atribut_hide = $('.hide_detail').attr('target-hide');
        if (atribut_show == atribut_hide){
        $('.hide_detail').show();
        $(this).hide();
        }
        $('.event_down').hide();
        $('#event_down'+$(this).attr('target')).show();
    });

and here's MY FIDDLE need your help to solve it.



Solution :

You are getting object array list you have to get only the current object Check updated fiddle here

"http://jsfiddle.net/p7Krf/3/"

$('.show_detail').click(function(){
    var atribut_show = $(this).attr('target');
    $('.hide_detail').each(function(element){
       if($(this).attr("target-hide")==atribut_show){
            $(this).show();
        }
    });
    $(this).hide();
   $('#event_down'+atribut_show).show();
});

    CSS Howto..

    Why is the icon shown in some browsers while other it is not

    How can i center the list items inside my unordered list?

    How to change visibility of Calendar on textbox click

    How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

    Show icon font on image center on mouse hover

    How to create a CSS border surrounding an input box?

    How to align right-to-left the elements of css menu

    How to design a CSS for floating confirm dialog centered on the visible portion of a page?

    How is text thickness calculated according to css property “font-weight”?

    how to make cross browser css ellipsis?

    How to use Jekyll baseurl in css files

    How to iqnore mousemove event on child ul

    CSS - How to avoid element content to be displayed on 2 lines

    Css - How to override css for a table cell

    How do you put two divs next to each other so they fill up the available space

    How are CSS frameworks used?

    How to prevent CSS table row expanding to parent height

    How to set min-height of div to height of viewport?

    How to force two elements become hovered at the same time?

    How to make image clickable if -1 z-index is given to create box-shadow?

    How to @import without including all CSS but just the @extends ones

    How to remove the empty space between divs in CSS?

    using css, how to position image so when resizing window, image will not move

    How do I deal with the issue of my divs being distorted greatly when zoomed in?

    How to define a set of CSS class names so Vim knows how to autocomplete

    How to create a speech bubble in css?

    How to target last 3 elements in a container using CSS :nth-last-child(n)?

    How to write inline CSS to web2py view

    How to locate a pointed div element in css

    How to make a div take the remaining height without knowing the height?