locked
How to do a pure css multiple link show / hide NO javascript only css and html RRS feed

  • Question

  • User1991482975 posted

    Hi, i have a list of link and each link should show or id a inner div..

    <a href=" id="id-1" class="btn btn-default btn-sm">+</a>
    <a href=" id="id-2" class="btn btn-default btn-sm">+</a>
    <a href=" id="id-3" class="btn btn-default btn-sm">+</a>
    <a href=" id="id-4" class="btn btn-default btn-sm">+</a>

    and each link should open each inner div

    <div href=" id="id-1">text 1</div>
    <div href=" id="id-2">text 1</div>
    <div href=" id="id-3">text 1</div>
    <div href=" id="id-4">text 1</div>

    And when open it, also clicking on the same link, hide the inner div

    How to achive this without javascript? only css and html

    Friday, June 8, 2018 12:43 PM

All replies

  • User753101303 posted

    Hi,

    You could try the principle shown at  https://www.w3schools.com/howto/howto_css_dropdown.asp maybe with a :focus element. You might be then able to show a div depending on which link is currently focused.

    Your markup is malformed ? My understanding is that you would have something such as :

    <div>
       <a>Title</a>
       <div>Additional info</div>
    <div>
    etc...

    And so Additional info would be hidden and shown only when the corresponding link has focus ???

    Friday, June 8, 2018 12:57 PM
  • User1991482975 posted

    Hi,

    sorry but your example has nothing to do with my request.

    In fact i have differents links and each link need to show or hide his own div..

    this is what i need.. and not a hover menu

    Friday, June 8, 2018 2:49 PM
  • User753101303 posted

    Sorry I tend to give the idea rather than ready to use code but I admit that I could have been a bit more explicit here ;-).

    The basic idea is to use :hover on an element to change the style of *another* element so here the idea could be to use something such as :

    <style>
    a+div
    {
    display:none;
    }
    a:focus+div
    {
    display:block;
    }
    </style>

    That is a div following a "a" link is hidden. If the "a" link has focus it is shown. You could test that with markup such as :

    <a href="#">+</a><div>Hello A</div>
    <hr>
    <a href="#">+</a><div>Hello B</div>
    <hr>
    <a href="#">+</a><div>Hello C</div>
    <hr>
    <a href="#">+</a><div>Hello D</div>
    <hr>

    Of course you would still need to add addtional class selectors or whatever so that this behavior happens only where you need. A draw back is that clicking again the same + won't hide the div (but clicking elsewhere will).

    Edit : BTW I remembered about https://www.w3schools.com/tags/tag_summary.asp. You could perhaps move my suggestion closer to that to ease a possible transition later something such as :

    <div class="details">
    <a href="#" class="summary">+ My title</a>
    <p>Some content</p>
    </div>

    and adjust CSS rules accordingly.

    Friday, June 8, 2018 3:23 PM
  • User1991482975 posted

    Hi, thanks for your explanation  but the problem is actually the fact that i need multiple link and each link should show end possibily hide is inner div...

    your example works only for a link... but i need to be working for multiple links..

    Saturday, June 9, 2018 7:53 AM
  • User-369506445 posted

    hi

    I think you are looking for below example :

    DEMO

    <style>
        div{
            display:none;
        }
    </style>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $('a').each(function (index, value) {          
                $(this).click(function () {                
                    showElement($(this).attr('id'));
                    hideElement($(this).attr('id'));
                });
            });
    
    
            function showElement(id)
            {
                $('div').each(function (index, value) {
                    if ($(this).attr('id') == id) {
                        $(this).css('display', 'block');
                    }
                });
            }
            function hideElement(id)
            {
                $('div').each(function (index, value) {
                    if ($(this).attr('id') != id)
                    {
                        $(this).css('display', 'none');
                    }
                });
            }
        })
    </script> 
    
    <a href="#" id="id-1" class="btn btn-default btn-sm">+</a>
    <a href="#" id="id-2" class="btn btn-default btn-sm">+</a>
    <a href="#" id="id-3" class="btn btn-default btn-sm">+</a>
    <a href="#" id="id-4" class="btn btn-default btn-sm">+</a>
    
    
    <div href="#" id="id-1">text 1</div>
    <div href="#" id="id-2">text 2</div>
    <div href="#" id="id-3">text 3</div>
    <div href="#" id="id-4">text 4</div>

    Saturday, June 9, 2018 8:09 AM
  • User1991482975 posted

    Hi, the results, it's almost there, in fact i also need with the same button to close the div( open and close)

    how to achive this?

    Monday, June 11, 2018 7:28 AM
  • User-369506445 posted

    I created a sample for you that when clicking on + the related id will open and if click on - close the same div please try below code :

    @{ 
        Layout = null;
    }
    <style>
        div {
            display: none;
        }
    </style>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $('a').each(function (index, value) {
                $(this).click(function () {
                    debugger;
                    var id = $(this).attr('id'); 
                    var arr = id.split("_");
                    
                    if (arr[0] == "open") { 
                        showElement(arr[1]);
                    } else
                    { 
                        hideElement(arr[1]);
                    }
                });
            });
    
    
            function showElement(id) {           
                $('div').each(function (index, value) {
                    if ($(this).attr('id') == id) {
                        $(this).css('display', 'block');
                    }
                });
            }
            function hideElement(id) {
                $('div').each(function (index, value) {
                    if ($(this).attr('id') == id) {
                        $(this).css('display', 'none');
                    }
                });
            }
        })
    </script>
     
    <a href="#" id="open_id-1" class="btn btn-default btn-sm">+</a>
    <a href="#" id="open_id-2" class="btn btn-default btn-sm">+</a>
    <a href="#" id="open_id-3" class="btn btn-default btn-sm">+</a>
    <a href="#" id="open_id-4" class="btn btn-default btn-sm">+</a>
    
    <br />
    
    <a href="#" id="close_id-1" class="btn btn-default btn-sm">-</a>
    <a href="#" id="close_id-2" class="btn btn-default btn-sm">-</a>
    <a href="#" id="close_id-3" class="btn btn-default btn-sm">-</a>
    <a href="#" id="close_id-4" class="btn btn-default btn-sm">-</a>
    
    
    
    <div href="#" id="id-1">text 1</div>
    <div href="#" id="id-2">text 2</div>
    <div href="#" id="id-3">text 3</div>
    <div href="#" id="id-4">text 4</div>

    Monday, June 11, 2018 7:55 AM