Geek asks and answers

How can you make a gap appear when clicked, but disappear when another link is clicked?

I am new to javascript, so please bear with me. I am trying to get a space that appears on a click that I executed, however I need it to return to being hidden when another link is clicked. This is what I still have.

<html>
<head>
<style>
aside.apps{
    position:relative;
}

span.socialApp{
    visibility:hidden;
    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}
</style>

<script>
var state = 'hidden'; 

function showApp(a) { 

    if (state == 'visible') { 
        state = 'hidden'; 
    } 
    else { 
        state = 'visible'; 
    } 

    if (document.getElementById && !document.all) { 
        x = document.getElementById(a); 
        x.style.visibility = state; 
    } 
} 
</script>
</head>

<body>

        <aside class="apps">
            <a href="javascript://" onclick="showApp('app1');">link1</a>
                <span class="socialApp" id="app1">stuff goes here1</span>
            <a href="javascript://" onclick="showApp('app2');">link2</a>
                <span class="socialApp" id="app2">stuff goes here2</span>
            <a href="javascript://" onclick="showApp('app3');">link3</a>
                <span class="socialApp" id="app3">stuff goes here3</span>
            <a href="javascript://" onclick="showApp('app4');">link4</a>
                <span class="socialApp" id="app4">stuff goes here4</span>
        </aside>
</body>
</html>

Currently, when you click on link 1, application 1 appears, after clicking on link2, app2 appears on top of link 1. When link2 is then closed, link 1 is still visible. I need to check all 4 and make everything hidden except the current selection.

+3
source share
5 answers

and welcome stack overflow!

-, jQuery, JavaScript. jQuery ( , Zepto, MooTools Dojo), JavaScript, - . jQuery , <head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

jQuery, onclick, <a>. onclick , - , DOM Level 1 () . 'click' - HTML JavaScript , , JavaScript.

jQuery () , on:

// #id is the 'id' attribute of the element you want to add a click handler to.
$('#id').on('click', function () { alert("Clicked!"); });

jQuery show hide, , :

// Again, #id is the id attribute of the element you want to show/hide.
$('#id').show();    // Make a hidden element visible.
$('#id').hide();    // Hide a visible element.

, , , jQuery, display CSS . , visibility.

, ; , , - .

<html>
    <head>
        <style>
span.socialApp {
    /* use display: none instead of visibilty: hidden */
    display: none;

    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}
        </style>

        <!-- include jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <!-- Script for toggle apps -->
        <script>
// Create an Array of all the app names.
var apps = [ 'app1', 'app2', 'app3' ];

// Variable which keeps track of which app is currently visible
var visibleAppName = null;

function onLinkClicked(event) {
    // Get the id of the link that was clicked.
    var linkName = event.target.id;

    // Strip off the '-link' from the end of the linkName
    var dashIndex = linkName.indexOf('-link');
    var appName = linkName.substr(0, dashIndex);

    // Call show app with the correct appName.
    showApp(appName);
}

function showApp(appNameToShow) { 
    // Hide the currently visible app (if there is one!)
    if (visibleAppName !== null) {
        $('#' + visibleAppName).hide();
    }

    // And show the one passed
    $('#' + appNameToShow).show();

    // Update the visibleApp property.
    visibleAppName = appNameToShow;
}

// $(document).ready waits for the page to finish rendering
$(document).ready(function () {
    // Walk through the Array of Apps and add a click handler to
    // it respective link.
    apps.forEach(function(name) {
        $('#' + name + '-link').on('click', onLinkClicked);
    });
});         
        </script>
    </head>
    <body>
            <aside class="apps">
            <a href="#" id="app1-link">link1</a>
            <span class="socialApp" id="app1">stuff goes here1</span>

            <a href="#" id="app2-link">link2</a>
            <span class="socialApp" id="app2">stuff goes here2</span>

            <a href="#" id="app3-link">link2</a>
            <span class="socialApp" id="app3">stuff goes here3</span>            
        </aside>
    </body>
</html>​​​​​​​​​​​

JavaScript, Object Orientation JavaScript, .

+1

; .

, ; , .

:

    <aside class="apps" id="aside">
        <a href="#" onclick="showApp('app1');">link1</a>
            <span class="socialApp" id="app1">stuff goes here1</span>
        <a href="#" onclick="showApp('app2');">link2</a>
            <span class="socialApp" id="app2">stuff goes here2</span>
        <a href="#" onclick="showApp('app3');">link3</a>
            <span class="socialApp" id="app3">stuff goes here3</span>
        <a href="#" onclick="showApp('app4');">link4</a>
            <span class="socialApp" id="app4">stuff goes here4</span>
    </aside>


function showApp(a) {
    var aside = document.getElementById('aside');
    var arr = aside.getElementsByTagName('span');
    for (i = 0; i < arr.length; i++) {
        if (arr[i].getAttribute('id') != a) {
            arr[i].style.visibility = 'hidden';
        }
    }
    var state;
    x = document.getElementById(a);
    if (x.style.visibility == 'visible') {
        state = 'hidden';
    }
    else {
        state = 'visible';
    }
    x.style.visibility = state;
}​
+2

JQuery. - :).

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

script

<script type="text/javascript">
    function showApp(a) {
        $(".selected").removeClass("selected");
        $(a).addClass("selected");
    };
</script>

html

<aside class="apps">
    <a href="#" onclick="showApp('#app1');">link1</a>
        <span class="socialApp" id="app1">stuff goes here1</span>
    <a href="#" onclick="showApp('#app2');">link2</a>
        <span class="socialApp" id="app2">stuff goes here2</span>
    <a href="#" onclick="showApp('#app3');">link3</a>
        <span class="socialApp" id="app3">stuff goes here3</span>
    <a href="#" onclick="showApp('#app4');">link4</a>
        <span class="socialApp" id="app4">stuff goes here4</span>
</aside>

css

.apps{
    position:relative;
}

.socialApp{
    visibility:hidden;
    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}

.selected {
    visibility: visible;   
}

JSFiddle: http://jsfiddle.net/peterf/u2SFL/

+2

, , . , . , , .

<html>
<head>
<style>
aside.apps{
    position:relative;
} 
span.socialApp{
    visibility:hidden;
    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}
</style>

<script>  
function showApp(a) { 
    var aside = document.getElementById('myaside');
    var spans = aside.getElementsByTagName('span');
    for(i=0,len=spans.length;i<len;i++){
     spans[i].style.visibility = 'hidden';
    }
    x = document.getElementById(a);  
    x.style.visibility = 'visible';  
}

</script>
</head>

<body>

        <aside class="apps" id="myaside">
            <a href="javascript://" onclick="showApp('app1');">link1</a>
                <span class="socialApp" id="app1">stuff goes here1</span>
            <a href="javascript://" onclick="showApp('app2');">link2</a>
                <span class="socialApp" id="app2">stuff goes here2</span>
            <a href="javascript://" onclick="showApp('app3');">link3</a>
                <span class="socialApp" id="app3">stuff goes here3</span>
            <a href="javascript://" onclick="showApp('app4');">link4</a>
                <span class="socialApp" id="app4">stuff goes here4</span>
        </aside>
</body>
</html>

:

javascript, jQuery, - , , .

, javascript javascript, .

, jQuery , javascript.

, , . ( onclick )

<html>
<head>
<style>
aside.apps{
    position:relative;
} 
span.socialApp{
    display:none;
    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}
</style>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
 $(document).ready(function(){
    $('aside').on('click','a',function(){      // This lines says that select aside and fire onclick even on click of anchor tag inside it
        $(this).parent().find('span').hide();    // $(this) is the clicked anchor
        $(this).next('span').show();    // Find the span next to clicked anchor and show it i.e. display:block
    })
 })

</script>
</head> 
<body> 
<aside class="apps">
    <a href="javascript:void(0);">link1</a>
        <span class="socialApp" id="app1">stuff goes here1</span>
    <a href="javascript:void(0);" >link2</a>
        <span class="socialApp" id="app2">stuff goes here2</span>
    <a href="javascript:void(0);" >link3</a>
        <span class="socialApp" id="app3">stuff goes here3</span>
    <a href="javascript:void(0);" >link4</a>
        <span class="socialApp" id="app4">stuff goes here4</span>
</aside> 
</body>
</html>
+1

( null).

, showApp, .

Then do the scroll that has just been pressed, and remember that it is now the currently visible element (if only the one that was just pressed is the same that has been visible so far - in this case you are not must make something visible, and there is no longer any element currently visible).

+1
source

More articles:


All Articles