Question

I asked this question yesterday got a pretty good answer but can’t figure out how to repost new code to get an answer to another question about the same code. I have buttons that I want to show/hide divs with information about a particular event/venue.

Here is the button html:

<img class="event" src="images/but_event_info.png" width="79" height="26" alt="Event Information" id="Event<?php echo $row_rsSchedules['EventID']; ?>But" /><img class="venue" src="images/but_venue_info.png" width="79" height="26" alt="Specific Venue Information" id="Venue<?php echo $row_rsSchedules['VenueID']; ?>But" /></p>

And the divs that I want to show:

<div class="VenueInfo" id="<?php echo 'Venue'.$row_rsSchedules['VenueID'].'Div'; ?>">Venue Info for <?php echo $row_rsSchedules['VenueID']; ?></div>
<div class="EventInfo" id="<?php echo 'Event'.$row_rsSchedules['EventID'].'Div'; ?>">Event Info for <?php echo $row_rsSchedules['EventID']; ?></div>

Here is the jquery code to show/hide the divs:

<script type="text/javascript">
$(document).ready(function() {
   $(".event.hidden").click(function () {
    var div_id = this.id.replace(/But/, 'Div');
$("#" + div_id).show('fast', 'linear'); 
   //$(this).siblings("div").show();
   $(this).removeClass('hidden').addClass('shown').text('Hide Event');
});
$(".event.shown").click(function () {
   var div_id = this.id.replace(/But/, 'Div');
 $("#" + div_id).hide('fast', 'linear'); 
   //$(this).siblings("div").hide();
   $(this).removeClass('shown').addClass('hidden').text('Event Details');
});

});
</script>

The answer was given to me at jquery show()/Hide() dynamically named elements

The answer that tandu gave was:
jQuery makes this very simple. As it seems that you can multiple event descriptions on the page at once, you may want to attach a class, “event”/”venue” to the appropriate buttons, also add ‘hidden’ class to them all at first since I think they all start off hidden, then this JS:

I simply added style settings like so:

<style type="text/css"> 
.VenueInfo {
 display: none;
}
.EventInfo {
 display: none;
}
.event {
 display: inline;
}

.event {
 display: inline;
}
</style>

Pardon me for the fact that I don’t know how to repost new code after I have made changes to the same question. Every time I have posted a question, I get answers and then never a response after I have made changes.

I thank you for you help in advance.

Answer 1

I’m not sure what you are asking, I guess you are having problems with showing the divs again, so change to

display: block;

your current

 display: inline;

Edit: and also you need to name your CSS classes accordingly to the classes you are adding/removing with Jquery

so your css should have

.show{ display: block;}
.hidden { display: none; }