Expand collapse button render

HTML & CSS
1

Hi,

the environment:
sorry can’t setup a live test, it’s a drupal local install with fullcalendar view.

I have this collapsable element (calendar), and it works fine, save couple things:

1 - might be something wrong by me, or a code bug (?), so if it’s beyond this thread no worry, I can live with it;
when clicking to expand (show calendar) the calendar header (nav buttons) display, but the actual calendar does not till you click any of the nav buttons.

2 - the width, and content alignment of the expand/collapse “button”
right now it spans the whole width of the page, and I’d like to limit it to the width of the content, and to have the text part in more lines, but side by side of the image.
something like this:

_________
|        | expand to
|  image | view graphic
|        | calendar of
|________| events

instead of

_________
|        |
|  image |
|        |
|________| expand to view graphic calendar of events

I can make this by creating the image containing both image, and text in photoshop, but keeping them separate gives me more immediate control over the text, in case of editing needs.

The code I am using now:

/* collapse/expand cal-view */
#top-content-wrap {
    vertical-align: top;
    height:auto !important;
    margin-bottom: 19px;
    clear: left;
}
#hide1 a, #show1 a {
    color: #fc7c01;
    text-decoration: none;
    background-color: #c9c9c9;
    display: block;
    padding: 9px;
    max-width: auto;
}
.cal-view {display:none; }
.show {display: none; }
.hide:target + .show {display: inline; }
.hide:target {display: none; }
.hide:target ~ .cal-view {display:inline; }
@media print { .hide, .show { display: none; } }
/* END collapse/expand cal-view */

html (don’t know if it’s a bug in Sitepoint code, but I had to remove all opening < to be able to see the code preview, and add them back again one by one, as of now it shows fine on preview, hope it’ll be the same when I submit - not first time it occured to me)

    <div id="top-content-wrap" class="column">
        <div id="hide1" class="hide">
        <a href="#hide1">
        <img src="sites/all/themes/afz_dru_02/fz-images/cal_02_90.png" />
        Expand to view graphic calendar of events /a>
       </div>
       <div id="show1" class="show">
        <a href="#show1">
        <img src="sites/all/themes/afz_dru_02/fz-images/cal_02_90.png" />
       Collapse</a>
        <br />Please click on "today" button for current month 
<!-- needed since only header is shown at first -->
       </div>
        <div class="cal-view">
           <!-- FZ added to show the calendar (page) view
            since the block view shows only the dates when something's going on w/o differentiating overlapping events -->
            <div id="cal-view" class="column">
              <?php print views_embed_view('calendar_of_events', 'page'); ?>
            </div>
           <!-- END FZ added to show the calendar (page) view -->
       </div>
   </div>

Thank you

2

No takers?

I put online the code if that can help:
holytablets dot org/gallery_test/index-2.php

Thank you

3

I see no calendar in the source code, nor any links. I’m afraid I can’t answer this question given this scenario.

While I appreciate your image you gave, I do not quite understand.

I’m looking at the page. Could you perhaps photoshop that page in a picture and show us your ideal look?

4

Thank you.

Sorry for the confusion … I removed the calendar from the online test page, now if you click on expand you see (should read):

Please click on “today” button for current month
calendar should be here
content to show/hide
Now this content is NOT important as it the expand/collapse works fine, I need the grey with (now added) red border to act as a button like what I tried to “draw” in op, instead of spanning the whole width of page.

Anyhow if still not clear I’ll prepare an image, I’ll be able to do so in couple of hours though.

5

Still sorta shooting in the dark for your functionality, but change the following display to inline-block. Is this what you want…?

.hide:target + .show {
  display: inline-block;
}
6

Thank you.

It doesn’t do it.

Anyway I uploaded the images to better explain what I’d like to get, please click expand to see what I’d like.

holytablets dot org/gallery_test/index-2.php

7

Did my code not do that?

8

No, I did also clear the cache, and refreshed, but nothing changed; I had tried the inline-block on other classes and ids, but nothing.

Anyhow let me retry once more … you never know.

[edit]
I just put it on the online test, and noticed it does so for the “collapse” part, which I had not tested, as I didn’t see any change on the “expand” button

9

Ok, like the edit above, it does so only when the collapse is visible.

10

Sorry, I replied to myself - still not fully used to the forum.

11

Could you screen shot what happens when you add my code in? Perhaps throw arrows in there showcasing the differences in what you want. Sorry but I’m out of it today…

12

I put it online, you can check it directly - you need to click expnad.

Thanks for the patience.

13

So I put it on the wrong one? Put it on the element then since I reversed it.

14

Not really, let’s say you got half of it, the “button” should be consistent in both status, whereas now it is like it should be when it reads “collapse”, and still full width in expand status.

The problem is there is no reversed code to put that on to get the expand status as well; at least not one that I could see.
Code is in head of the index-2.php if you want to check it.

15

Putting inline-block in #hide1 a, #show1 a does it.

Now do you have any idea for the text on more lines?

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.