CODEWITHSUNDEEP
jquerywordpress
Ana DEV
Ana DEV

Reputation: 1030

How to connect two elements with same id's

I have a wordpress custom post type and i have displayed them like this 

<?php
            $count = 1;$counter = 1;
            $query = new WP_Query( array('post_type' => 'companyhistory', 'posts_per_page' => -1, 'order' => 'ASC' ) );
            while ( $query->have_posts() ) : $query->the_post(); 

        ?>
        <div class="companyhistoryitem history_year<?php echo $count;?>" id="<?php echo $count;?>"><?php the_title();?></div>
        <div class="company_historycontent history_year<?php echo $count;?>" id="<?php echo $counter;?>"><?php the_content();?></div>
            <?php $count++;$counter++; endwhile; wp_reset_query();?>

I wanted to show corressponded content on click on the .companyhistoryitem .I am tring to connect them with this jquery code but no luck 

jQuery('.companyhistoryitem').each(function(){
    jQuery(this).click(function(){
        var historytitleid = jQuery(this).attr('id');
        jQuery('.company_historycontent').each(function(){
            var historycontentid = jQuery(this).attr('id');
            console.log(historycontentid);
        });
        var aaa  = jQuery('.company_history_section .maincontainer').find('.company_historycontent').attr('id' , historytitleid);
        if(historytitleid == aaa){
            console.log(aaa.html());
        }
    });
});

Upvotes: 2

Views: 87

Answers (2)

Mat
Mat

Reputation: 2184

Every id should be unique on the same page and it shouldn't start with a number. Usually in this situations I use something like:

<div id="i1" data-id="1">...</div>
<div id="j1">...</div>

Then:

$('#i1').click( function() {
  var id = $(this).attr( 'data-id' );
  $('#j'+id).css( 'color', 'red' );
});

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

TRY:

    $query = new WP_Query( array('post_type' => 'companyhistory', 'posts_per_page' => -1, 'order' => 'ASC' ) );
    while ( $query->have_posts() ) : $query->the_post(); 

?>
<div class="parent">
<div class="companyhistoryitem history_year"><?php the_title();?></div>
<div class="company_historycontent history_year"><?php the_content();?></div></div>
    <?php endwhile; wp_reset_query();?>

js:

$('.companyhistoryitem').on('click',function(){
  $(this).parent().find('.company_historycontent').show(); 
  //or $(this).next('.company_historycontent').show(); 
});

Upvotes: 2

Related Questions