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..

    How to set transition from JavaScript while still inheriting style from CSS [closed]

    How to apply a CSS class on hover to dynamically generated submit buttons?

    How to make a split screen video with full height?

    How to use Javascript in a innerHTML inline css scenario?

    how to Load a css file for html page android web view

    Font not showing properly in HTML page

    How To Make CSS Animations Ease Back To Position When No Longer Hovering?

    how to add hover effect to button using css

    How to make links one link per line, only in the footer via css?

    How come I keep getting a Failed to load resource: Error everytime I run my applacation?

    How to make header background 100% height?

    How to make my dynamic table scrollable when mouse clicked?

    How to set borders between children from parent in CSS?

    How to prepend a div to another div using javascript

    How to show only the top portion of an image with CSS?

    How to make a shrink-to-fit container with max-height and scrollbars in the content area?

    How to make background image on hover have a transition effect without default background image?

    How do I make CSS hover transitions animate on mouse off AND mouse over, and replicate that in jQuery?

    How can CSS interfere with JavaScript?

    How to move img src a few pixels down in html page

    CSS - How to float correctly into pseudocolumns

    How can I make this little javascript work with 2 textarea elements without killing the CSS?

    How to link index.html to css file for github page

    How to style PushButton's image size on hover/pressed in Qt4 using CSS

    How to stop the navigation bar after scrolling?

    How do you make a button increase in size (125%) for few milliseconds and then return it original size on click?

    How to fix the Height for this area?

    How to arrange/align two paragraphs into boxes [duplicate]

    How to convert a jQuery fade effect in CSS?

    how can I hide an element inside iFrame using Jquery or CSS